From 5ed5ce3d774a845203da50858ab13a13c774c2e8 Mon Sep 17 00:00:00 2001
From: wintbit <wintbit@outlook.com>
Date: Sat, 4 Apr 2026 16:45:05 +0800
Subject: [PATCH 1/4] fix: update iframe source to production URL and enhance
 permissions

---
 src/components/panels/MatchReactionStrip.vue |  8 ++++----
 src/components/panels/MatchSupportButton.vue | 17 +++++++++++++++--
 src/iframe-inject.ts                         |  6 +++---
 3 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/components/panels/MatchReactionStrip.vue b/src/components/panels/MatchReactionStrip.vue
index 24e00e0..6eae6d4 100644
--- a/src/components/panels/MatchReactionStrip.vue
+++ b/src/components/panels/MatchReactionStrip.vue
@@ -55,15 +55,15 @@ function showReactionBurst(id: string, url: string) {
   burstHideTimer = setTimeout(() => {
     burstVisible.value = false;
     burstHideTimer = null;
-  }, 420);
+  }, 840);
   burstClearTimer = setTimeout(() => {
     burst.value = null;
     burstClearTimer = null;
-  }, 620);
+  }, 1200);
   burstUnlockTimer = setTimeout(() => {
     isBurstAnimating.value = false;
     burstUnlockTimer = null;
-  }, 620);
+  }, 1200);
 }
 
 function onReactionClick(item: ReactionItem) {
@@ -136,7 +136,7 @@ function chipContentClass(count: number) {
     enter-active-class="transition duration-300 ease-out"
     enter-from-class="translate-y-6 scale-50 rotate-[-12deg] opacity-0"
     enter-to-class="-translate-y-1 scale-110 rotate-3 opacity-100"
-    leave-active-class="transition duration-200 ease-in"
+    leave-active-class="transition duration-500 ease-in"
     leave-from-class="-translate-y-3 scale-100 opacity-100"
     leave-to-class="-translate-y-8 scale-90 opacity-0"
   >
diff --git a/src/components/panels/MatchSupportButton.vue b/src/components/panels/MatchSupportButton.vue
index e3fac60..4c15db1 100644
--- a/src/components/panels/MatchSupportButton.vue
+++ b/src/components/panels/MatchSupportButton.vue
@@ -150,7 +150,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div ref="anchorRef" class="relative flex shrink-0 items-center" @click.stop>
+  <div ref="anchorRef" class="relative flex shrink-0 items-center select-none" @click.stop @contextmenu.prevent>
     <Button
       rounded
       text
@@ -170,7 +170,14 @@ onBeforeUnmount(() => {
       @keydown.enter.stop.prevent="sendSupportOnce"
       @keydown.space.stop.prevent="sendSupportOnce"
     >
-      <img :src="oak" :alt="supportLabel" class="h-5 w-5 object-contain sm:h-6 sm:w-6" />
+      <img
+        :src="oak"
+        :alt="supportLabel"
+        class="support-icon h-5 w-5 object-contain sm:h-6 sm:w-6"
+        draggable="false"
+        @dragstart.prevent
+        @contextmenu.prevent
+      />
     </Button>
   </div>
 
@@ -206,6 +213,12 @@ onBeforeUnmount(() => {
   filter: drop-shadow(0 4px 8px rgb(15 23 42 / 0.28));
 }
 
+.support-icon {
+  -webkit-touch-callout: none;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
 @keyframes floating-like-rise {
   0% {
     opacity: 0;
diff --git a/src/iframe-inject.ts b/src/iframe-inject.ts
index 77fc942..2981194 100644
--- a/src/iframe-inject.ts
+++ b/src/iframe-inject.ts
@@ -38,11 +38,11 @@ if (existingIframe) {
 }
 
 const iframe = document.createElement('iframe') as HTMLIFrameElement;
-// iframe.src = 'https://rmlive.scutbot.cn';
-iframe.src = `http://localhost:5173`;
+iframe.src = 'https://rmlive.scutrobot.com';
+// iframe.src = `http://localhost:5173`;
 iframe.id = 'rm-live-iframe';
 iframe.allowFullscreen = true;
-iframe.allow = 'autoplay; fullscreen; picture-in-picture; notifications; permissions; periodic-sync';
+iframe.allow = 'autoplay; fullscreen; picture-in-picture; notifications; permissions; periodic-sync; vibrate';
 iframe.style.width = '100%';
 iframe.style.height = '100%';
 iframe.style.border = '0';

From 506a258dd0696babe735d766da6e4481da906a16 Mon Sep 17 00:00:00 2001
From: wintbit <wintbit@outlook.com>
Date: Sat, 4 Apr 2026 18:18:40 +0800
Subject: [PATCH 2/4] feat: enhance live player functionality and performance
 tracking

- Refactored LivePlayer.vue to improve danmu connection handling and player mounting logic.
- Added performance marking for player mount and readiness events.
- Updated HLS configuration for better streaming performance.
- Introduced incremental loading for schedule lists in ScheduleList.vue.
- Implemented skeleton loading states in CurrentMatchPanel.vue for better user experience.
- Enhanced danmu lifecycle management to retain message history during room switches.
- Improved observability with performance measurement utilities.
- Updated rmData worker to handle snapshot patches and bootstrap payloads more efficiently.
- Added persistent state management for danmu and rmData stores.
---
 package.json                                |   1 +
 pnpm-lock.yaml                              |  24 ++
 src/App.vue                                 |  43 ++-
 src/components/common/TeamLogo.vue          |  37 ++-
 src/components/header/TopToolbar.vue        |  29 ++
 src/components/layout/LiveStage.vue         |  32 ++-
 src/components/layout/ScheduleArea.vue      |  21 +-
 src/components/live/LivePlayer.vue          |  90 +++++--
 src/components/panels/CurrentMatchPanel.vue |  49 +++-
 src/components/panels/ScheduleList.vue      | 164 +++++++++++-
 src/components/panels/SchedulePanel.vue     |  10 +-
 src/composables/danmuLifecycle.ts           |   6 +-
 src/danmu/im/im.worker.ts                   |   4 +-
 src/main.ts                                 |  40 ++-
 src/stores/danmu.ts                         |   6 +
 src/stores/rmData.ts                        | 140 +++++++++-
 src/utils/observability.ts                  |  29 ++
 src/workers/rmData.worker.ts                | 278 +++++++++++++++++---
 src/workers/rmDataProtocol.ts               |  16 +-
 19 files changed, 895 insertions(+), 124 deletions(-)

diff --git a/package.json b/package.json
index 2513aa6..7736dc1 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "hls.js": "^1.6.15",
     "leancloud-realtime": "5.0.0-rc.8",
     "pinia": "^3.0.4",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "primeicons": "^7.0.0",
     "primevue": "^4.5.4",
     "uuid": "^13.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c13d370..4404d93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ importers:
       pinia:
         specifier: ^3.0.4
         version: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+      pinia-plugin-persistedstate:
+        specifier: ^4.7.1
+        version: 4.7.1(pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)))
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -2801,6 +2804,7 @@ packages:
   glob@11.1.0:
     resolution: {integrity: sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==}
     engines: {node: 20 || >=22}
+    deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
     hasBin: true
 
   glob@7.2.3:
@@ -3777,6 +3781,20 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  pinia-plugin-persistedstate@4.7.1:
+    resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==}
+    peerDependencies:
+      '@nuxt/kit': '>=3.0.0'
+      '@pinia/nuxt': '>=0.10.0'
+      pinia: '>=3.0.0'
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+      '@pinia/nuxt':
+        optional: true
+      pinia:
+        optional: true
+
   pinia@3.0.4:
     resolution: {integrity: sha512-l7pqLUFTI/+ESXn6k3nu30ZIzW5E2WZF/LaHJEpoq6ElcLD+wduZoB2kBN19du6K/4FDpPMazY2wJr+IndBtQw==}
     peerDependencies:
@@ -8742,6 +8760,12 @@ snapshots:
 
   pidtree@0.6.0: {}
 
+  pinia-plugin-persistedstate@4.7.1(pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))):
+    dependencies:
+      defu: 6.1.4
+    optionalDependencies:
+      pinia: 3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3))
+
   pinia@3.0.4(typescript@5.9.3)(vue@3.5.30(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 7.7.9
diff --git a/src/App.vue b/src/App.vue
index 736d096..a3eff6c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import Toast from 'primevue/toast';
-import { defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, ref } from 'vue';
 import TopToolbar from './components/header/TopToolbar.vue';
 import LiveStage from './components/layout/LiveStage.vue';
 import ScheduleArea from './components/layout/ScheduleArea.vue';
 import CurrentMatchPanel from './components/panels/CurrentMatchPanel.vue';
 import { bindDanmuRoomReset } from './composables/danmuLifecycle';
-import { scheduleDeferredMount } from './composables/deferredMount';
 import { requestNotificationPermissionOnLaunch } from './composables/notificationPermissionOnLaunch';
 import { useScheduleNotifyPolling } from './composables/scheduleNotifyClient';
 import { useDanmuStore } from './stores/danmu';
 import { useRmDataStore } from './stores/rmData';
 import { useScheduleNotifyStore } from './stores/scheduleNotify';
 import { useUiStore } from './stores/ui';
+import { markPerformance } from './utils/observability';
 import type { DanmuMessage } from './types/api';
 import type { TeamSelectPayload } from './types/teamSelect';
 
@@ -27,6 +27,7 @@ const scheduleNotifyStore = useScheduleNotifyStore();
 useScheduleNotifyPolling();
 
 const { selectedZoneChatRoomId } = storeToRefs(dataStore);
+const { runningMatchForSelectedZone, streamLoading, liveGameInfo } = storeToRefs(dataStore);
 
 const dataDialogVisible = ref(false);
 const dataDialogTeam = ref<string | null>(null);
@@ -39,12 +40,20 @@ function onDanmuReceived(msg: DanmuMessage) {
 }
 
 function onDanmuReset() {
-  danmuStore.clearMessages();
+  // Keep cached danmu visible during reconnect; fresh history/realtime messages will update it.
 }
 
 bindDanmuRoomReset(selectedZoneChatRoomId, danmuStore.clearMessages);
 
-const enableSecondaryPanels = ref(false);
+const enableSecondaryPanels = ref(true);
+
+const showMatchHero = computed(() => {
+  if (runningMatchForSelectedZone.value) {
+    return true;
+  }
+
+  return streamLoading.value || !liveGameInfo.value;
+});
 
 function onOpenTeamData(payload: string | TeamSelectPayload) {
   const teamName = typeof payload === 'string' ? payload : payload.teamName;
@@ -60,22 +69,16 @@ function onOpenTeamData(payload: string | TeamSelectPayload) {
   dataDialogVisible.value = true;
 }
 
-let stopDeferredMount: (() => void) | null = null;
-
 onMounted(() => {
+  markPerformance('rm-app-on-mounted');
   requestNotificationPermissionOnLaunch();
   void scheduleNotifyStore.syncPrefsToIdb();
   uiStore.initializeUi();
   dataStore.startPolling();
-  stopDeferredMount = scheduleDeferredMount(() => {
-    enableSecondaryPanels.value = true;
-  });
+  markPerformance('rm-data-start-dispatched');
 });
 
 onBeforeUnmount(() => {
-  if (stopDeferredMount) {
-    stopDeferredMount();
-  }
   uiStore.teardownUi();
   dataStore.stopPolling();
 });
@@ -86,7 +89,7 @@ onBeforeUnmount(() => {
     <Toast position="top-right" />
     <TopToolbar />
 
-    <section class="match-hero">
+    <section v-if="showMatchHero" class="match-hero" :class="{ reserving: !runningMatchForSelectedZone }">
       <CurrentMatchPanel :key="dataStore.selectedZoneId ?? 'zone-empty'" @team-select="onOpenTeamData" />
     </section>
 
@@ -118,9 +121,23 @@ onBeforeUnmount(() => {
   margin-bottom: 1rem;
 }
 
+.match-hero.reserving {
+  min-height: 7.5rem;
+}
+
 @media (max-width: 768px) {
   .app-shell {
     padding: 0.65rem;
   }
+
+  .match-hero.reserving {
+    min-height: 6rem;
+  }
+}
+</style>
+
+<style>
+html {
+  scrollbar-gutter: stable both-edges;
 }
 </style>
diff --git a/src/components/common/TeamLogo.vue b/src/components/common/TeamLogo.vue
index 160c5ae..63091d3 100644
--- a/src/components/common/TeamLogo.vue
+++ b/src/components/common/TeamLogo.vue
@@ -20,6 +20,15 @@ const props = withDefaults(defineProps<Props>(), {
 
 const logoUrl = computed(() => (props.logo ? buildImageUrl(props.logo) : ''));
 
+const placeholderText = computed(() => {
+  const value = String(props.teamName ?? '').trim();
+  if (!value) {
+    return '';
+  }
+
+  return [...value].slice(0, 2).join('');
+});
+
 const wrapperStyle = computed(() => {
   if (props.customSize) {
     return {
@@ -42,14 +51,16 @@ const wrapperStyle = computed(() => {
 
 <template>
   <div
-    v-if="logoUrl"
     class="team-logo-wrapper"
-    :class="{ rounded: rounded, square: !rounded }"
+    :class="{ rounded: rounded, square: !rounded, placeholder: !logoUrl }"
     :style="{
       ...wrapperStyle,
     }"
+    :aria-label="teamName"
+    role="img"
   >
-    <img :src="logoUrl" :alt="teamName" class="team-logo-img" />
+    <img v-if="logoUrl" :src="logoUrl" :alt="teamName" class="team-logo-img" decoding="async" />
+    <span v-else class="team-logo-placeholder">{{ placeholderText }}</span>
   </div>
 </template>
 
@@ -61,6 +72,10 @@ const wrapperStyle = computed(() => {
   background-color: white;
   flex-shrink: 0;
   overflow: hidden;
+  color: var(--text-color-secondary);
+  font-weight: 700;
+  font-size: 0.72em;
+  line-height: 1;
 }
 
 .team-logo-wrapper.rounded {
@@ -76,4 +91,20 @@ const wrapperStyle = computed(() => {
   height: 100%;
   object-fit: cover;
 }
+
+.team-logo-wrapper.placeholder {
+  background: linear-gradient(135deg, rgba(148, 163, 184, 0.18), rgba(148, 163, 184, 0.08));
+  border: 1px solid rgba(148, 163, 184, 0.28);
+}
+
+.team-logo-placeholder {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  user-select: none;
+}
 </style>
diff --git a/src/components/header/TopToolbar.vue b/src/components/header/TopToolbar.vue
index 6137fbd..5c8d9b4 100644
--- a/src/components/header/TopToolbar.vue
+++ b/src/components/header/TopToolbar.vue
@@ -207,6 +207,35 @@ const settingsVisible = ref(false);
   margin-bottom: 1rem;
 }
 
+.top-toolbar :deep(.p-toolbar) {
+  min-height: 3.2rem;
+}
+
+@media (min-width: 769px) {
+  .top-toolbar :deep(.p-toolbar) {
+    flex-wrap: nowrap;
+    align-items: center;
+  }
+
+  .top-toolbar :deep(.p-toolbar-start),
+  .top-toolbar :deep(.p-toolbar-center),
+  .top-toolbar :deep(.p-toolbar-end) {
+    min-width: 0;
+  }
+
+  .top-toolbar :deep(.p-toolbar-center) {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+
+  .top-toolbar :deep(.p-toolbar-end) {
+    flex-shrink: 0;
+    gap: 0.2rem;
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
 .toolbar-brand {
   display: flex;
   align-items: center;
diff --git a/src/components/layout/LiveStage.vue b/src/components/layout/LiveStage.vue
index 06a3289..6cfeab7 100644
--- a/src/components/layout/LiveStage.vue
+++ b/src/components/layout/LiveStage.vue
@@ -6,6 +6,7 @@ import { Fieldset } from 'primevue';
 import Splitter from 'primevue/splitter';
 import SplitterPanel from 'primevue/splitterpanel';
 import { computed, defineAsyncComponent } from 'vue';
+import LivePlayer from '../live/LivePlayer.vue';
 import type { DanmuMessage } from '../../types/api';
 
 const dataStore = useRmDataStore();
@@ -14,6 +15,7 @@ const uiStore = useUiStore();
 const {
   effectiveStreamUrl,
   streamLoading,
+  liveGameInfo,
   effectiveStreamErrorMessage,
   playerQualityOptions,
   selectedQualityRes,
@@ -29,12 +31,12 @@ const emit = defineEmits<{
   danmuReset: [];
 }>();
 
-const LivePlayer = defineAsyncComponent(() => import('../live/LivePlayer.vue'));
 const DanmuPanel = defineAsyncComponent(() => import('../danmu/DanmuPanel.vue'));
 const MatchFirepowerBar = defineAsyncComponent(() => import('../panels/MatchFirepowerBar.vue'));
 const MatchReactionStrip = defineAsyncComponent(() => import('../panels/MatchReactionStrip.vue'));
 
 const hasCurrentMatch = computed(() => Boolean(runningMatchForSelectedZone.value));
+const showMatchDependentPlaceholder = computed(() => streamLoading.value || !liveGameInfo.value);
 
 function onRetry() {
   void dataStore.retryLiveStream();
@@ -54,7 +56,8 @@ function onDanmuReset() {
     <Splitter v-if="!isMobile && danmuEnabledAtLoad" layout="horizontal" :style="{ height: '100%' }">
       <SplitterPanel :size="75" :minSize="50">
         <div class="live-column">
-          <MatchFirepowerBar v-if="hasCurrentMatch && pkEnabled" />
+          <MatchFirepowerBar v-if="pkEnabled && hasCurrentMatch" />
+          <div v-else-if="pkEnabled && showMatchDependentPlaceholder" class="firepower-slot" aria-hidden="true" />
           <LivePlayer
             :stream-url="effectiveStreamUrl"
             :loading="streamLoading"
@@ -66,9 +69,12 @@ function onDanmuReset() {
             @danmu="onDanmu"
             @danmu-reset="onDanmuReset"
           />
-          <div v-if="hasCurrentMatch && reactionEnabled">
-            <MatchReactionStrip />
-          </div>
+          <MatchReactionStrip v-if="reactionEnabled && hasCurrentMatch" />
+          <div
+            v-else-if="reactionEnabled && showMatchDependentPlaceholder"
+            class="reaction-slot"
+            aria-hidden="true"
+          />
         </div>
       </SplitterPanel>
 
@@ -78,7 +84,8 @@ function onDanmuReset() {
     </Splitter>
 
     <div v-else class="live-column">
-      <MatchFirepowerBar v-if="hasCurrentMatch && pkEnabled" />
+      <MatchFirepowerBar v-if="pkEnabled && hasCurrentMatch" />
+      <div v-else-if="pkEnabled && showMatchDependentPlaceholder" class="firepower-slot" aria-hidden="true" />
       <LivePlayer
         :stream-url="effectiveStreamUrl"
         :loading="streamLoading"
@@ -90,9 +97,8 @@ function onDanmuReset() {
         @danmu="onDanmu"
         @danmu-reset="onDanmuReset"
       />
-      <div v-if="hasCurrentMatch && reactionEnabled" class="mt-2">
-        <MatchReactionStrip />
-      </div>
+      <MatchReactionStrip v-if="reactionEnabled && hasCurrentMatch" class="mt-2" />
+      <div v-else-if="reactionEnabled && showMatchDependentPlaceholder" class="reaction-slot mt-2" aria-hidden="true" />
 
       <Fieldset v-if="danmuEnabledAtLoad && isMobile" legend="弹幕列表" toggleable class="mobile-danmu-panel">
         <div class="mobile-danmu-wrap">
@@ -115,6 +121,14 @@ function onDanmuReset() {
   min-width: 0;
 }
 
+.firepower-slot {
+  min-height: 2.9rem;
+}
+
+.reaction-slot {
+  min-height: 3.4rem;
+}
+
 .mobile-danmu-panel {
   margin-top: 0.75rem;
 }
diff --git a/src/components/layout/ScheduleArea.vue b/src/components/layout/ScheduleArea.vue
index 4138c45..7c88bca 100644
--- a/src/components/layout/ScheduleArea.vue
+++ b/src/components/layout/ScheduleArea.vue
@@ -2,16 +2,11 @@
 import { useRmDataStore } from '@/stores/rmData';
 import { useUiStore } from '@/stores/ui';
 import { storeToRefs } from 'pinia';
-import Skeleton from 'primevue/skeleton';
-import { defineAsyncComponent } from 'vue';
+import SchedulePanel from '../panels/SchedulePanel.vue';
 
 import type { TeamSelectPayload } from '@/types/teamSelect';
 
-interface Props {
-  enabled: boolean;
-}
-
-defineProps<Props>();
+defineProps<{ enabled: boolean }>();
 
 const emit = defineEmits<{
   teamSelect: [payload: TeamSelectPayload];
@@ -23,8 +18,6 @@ const { isMobile } = storeToRefs(uiStore);
 const dataStore = useRmDataStore();
 const { selectedZoneId, teamGroupMap } = storeToRefs(dataStore);
 
-const SchedulePanel = defineAsyncComponent(() => import('../panels/SchedulePanel.vue'));
-
 function onTeamSelect(payload: TeamSelectPayload) {
   emit('teamSelect', payload);
 }
@@ -32,7 +25,7 @@ function onTeamSelect(payload: TeamSelectPayload) {
 
 <template>
   <section id="rm-schedule-panel" class="lower-grid">
-    <div v-if="enabled" class="schedule-cell">
+    <div class="schedule-cell">
       <SchedulePanel
         :selected-zone-id="selectedZoneId"
         :team-group-map="teamGroupMap"
@@ -40,10 +33,6 @@ function onTeamSelect(payload: TeamSelectPayload) {
         @team-select="onTeamSelect"
       />
     </div>
-
-    <div v-else class="schedule-placeholder">
-      <Skeleton width="100%" height="18rem" borderRadius="12px" />
-    </div>
   </section>
 </template>
 
@@ -58,8 +47,4 @@ function onTeamSelect(payload: TeamSelectPayload) {
 .schedule-cell {
   min-width: 0;
 }
-
-.schedule-placeholder {
-  min-width: 0;
-}
 </style>
diff --git a/src/components/live/LivePlayer.vue b/src/components/live/LivePlayer.vue
index d227991..d8318ec 100644
--- a/src/components/live/LivePlayer.vue
+++ b/src/components/live/LivePlayer.vue
@@ -6,10 +6,6 @@ import { useRmDataStore } from '@/stores/rmData';
 import { useUiStore } from '@/stores/ui';
 import { isIFrame, useUserInfoStore } from '@/stores/userInfo';
 import { formatStructuredName, resolveDisplaySchool } from '@/utils/danmuView';
-import Artplayer, { Option } from 'artplayer';
-import artplayerPluginChromecast from 'artplayer-plugin-chromecast';
-import artplayerPluginDanmuku, { type Danmu } from 'artplayer-plugin-danmuku';
-import Hls from 'hls.js/dist/hls.js';
 import { storeToRefs } from 'pinia';
 import Button from 'primevue/button';
 import Message from 'primevue/message';
@@ -18,6 +14,10 @@ import { useToast } from 'primevue/usetoast';
 import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import type { DanmuAttributes, DanmuMessage } from '../../types/api';
 import DanmuFilterDialog from '../dialogs/DanmuFilterDialog.vue';
+import { markPerformance } from '../../utils/observability';
+import type Artplayer from 'artplayer';
+import type { Option } from 'artplayer';
+import type { Danmu } from 'artplayer-plugin-danmuku';
 
 interface QualityOption {
   label: string;
@@ -51,13 +51,15 @@ const container = ref<HTMLDivElement | null>(null);
 let player: Artplayer | null = null;
 let playerReady = false;
 /** Hls instance for current stream; must be torn down before each new customType load and on player destroy. */
-let liveHls: InstanceType<typeof Hls> | null = null;
+let liveHls: { destroy: () => void } | null = null;
 let danmukuPlugin: any = null;
 const pendingDanmuQueue: DanmuMessage[] = [];
 const danmuService = ref<DanmuService | null>(null);
 let currentRoomId: string | null = null;
+let pendingRoomId: string | null = null;
 let roomSwitchToken = 0;
 let connectingService: DanmuService | null = null;
+let playerMountToken = 0;
 
 const danmuFilterStore = useDanmuFilterStore();
 const matchEngagementStore = useMatchEngagementStore();
@@ -243,6 +245,7 @@ async function destroyDanmu() {
 }
 
 function destroyPlayer() {
+  playerMountToken += 1;
   destroyAttachedHls();
   if (player) {
     player.destroy(false);
@@ -301,6 +304,29 @@ function createDebugDanmu(text?: string): DanmuMessage {
   };
 }
 
+function syncDanmuConnection() {
+  if (!danmuEnabledAtLoad) {
+    currentRoomId = null;
+    pendingRoomId = null;
+    roomSwitchToken += 1;
+    void destroyDanmu();
+    return;
+  }
+
+  if (!playerReady) {
+    return;
+  }
+
+  if (!pendingRoomId) {
+    currentRoomId = null;
+    roomSwitchToken += 1;
+    void destroyDanmu();
+    return;
+  }
+
+  void initDanmu(pendingRoomId);
+}
+
 function exposeDanmuDebugApi() {
   if (typeof window === 'undefined') {
     return;
@@ -446,11 +472,29 @@ async function mountPlayer(url: string) {
   }
 
   destroyPlayer();
+  const mountToken = ++playerMountToken;
+  markPerformance('rm-player-mount-start');
+
+  const [artplayerModule, hlsModule, danmukuModule, chromecastModule] = await Promise.all([
+    import('artplayer'),
+    import('hls.js/dist/hls.js'),
+    danmuEnabledAtLoad ? import('artplayer-plugin-danmuku') : Promise.resolve(null),
+    uiStore.isMobile ? Promise.resolve(null) : import('artplayer-plugin-chromecast'),
+  ]);
+
+  if (mountToken !== playerMountToken || !container.value) {
+    return;
+  }
+
+  const ArtplayerCtor = artplayerModule.default;
+  const HlsCtor = hlsModule.default;
+  const artplayerPluginDanmuku = danmukuModule?.default;
+  const artplayerPluginChromecast = chromecastModule?.default;
 
   const qualityItems = buildQualityItems();
 
   const plugins: any[] = [];
-  if (danmuEnabledAtLoad) {
+  if (danmuEnabledAtLoad && artplayerPluginDanmuku) {
     plugins.push(
       artplayerPluginDanmuku({
         danmuku: [],
@@ -468,7 +512,7 @@ async function mountPlayer(url: string) {
   }
 
   // PC端启用 Chromecast
-  if (!uiStore.isMobile) {
+  if (!uiStore.isMobile && artplayerPluginChromecast) {
     plugins.push(artplayerPluginChromecast({}));
   }
 
@@ -519,17 +563,18 @@ async function mountPlayer(url: string) {
     customType: {
       m3u8(video: HTMLVideoElement, m3u8Url: string) {
         destroyAttachedHls();
-        if (Hls.isSupported()) {
-          const hls = new Hls({
+        if (HlsCtor.isSupported()) {
+          const hls = new HlsCtor({
             lowLatencyMode: true,
             liveDurationInfinity: true,
             liveSyncMode: 'edge',
-            backBufferLength: 8,
-            maxBufferLength: 10,
-            maxMaxBufferLength: 30,
-            liveSyncDurationCount: 3,
+            backBufferLength: 4,
+            maxBufferLength: 6,
+            maxMaxBufferLength: 18,
+            liveSyncDurationCount: 1,
             maxLiveSyncPlaybackRate: 1.0,
             liveSyncOnStallIncrease: 0.25,
+            startLevel: -1,
           });
           liveHls = hls;
           hls.loadSource(m3u8Url);
@@ -541,14 +586,20 @@ async function mountPlayer(url: string) {
     },
   };
 
-  player = new Artplayer(playerOptions);
+  player = new ArtplayerCtor(playerOptions);
   danmukuPlugin = danmuEnabledAtLoad ? (player as any).plugins?.artplayerPluginDanmuku : null;
 
   // Some browsers still require an explicit play attempt after source mount.
   player.on('ready', () => {
+    if (mountToken !== playerMountToken) {
+      return;
+    }
+
     playerReady = true;
+    markPerformance('rm-player-ready');
     danmukuPlugin = danmuEnabledAtLoad ? (player as any).plugins?.artplayerPluginDanmuku : null;
     updateQualityControl();
+    syncDanmuConnection();
     flushPendingDanmu();
     try {
       player?.play();
@@ -572,6 +623,8 @@ async function applyStreamUrl(url: string) {
     return;
   }
 
+  markPerformance('rm-player-url-applied');
+
   if (player && playerReady) {
     try {
       await exitPipIfNeeded();
@@ -589,6 +642,7 @@ async function applyStreamUrl(url: string) {
 watch(
   () => props.chatRoomId,
   (roomId) => {
+    pendingRoomId = roomId ?? null;
     if (!danmuEnabledAtLoad) {
       currentRoomId = null;
       roomSwitchToken += 1;
@@ -596,13 +650,7 @@ watch(
       return;
     }
     pendingDanmuQueue.length = 0;
-    if (roomId) {
-      void initDanmu(roomId);
-    } else {
-      currentRoomId = null;
-      roomSwitchToken += 1;
-      void destroyDanmu();
-    }
+    syncDanmuConnection();
   },
   { immediate: true },
 );
diff --git a/src/components/panels/CurrentMatchPanel.vue b/src/components/panels/CurrentMatchPanel.vue
index bf77e72..e4900a7 100644
--- a/src/components/panels/CurrentMatchPanel.vue
+++ b/src/components/panels/CurrentMatchPanel.vue
@@ -5,6 +5,7 @@ import { useUiStore } from '@/stores/ui';
 import type { TeamSelectPayload } from '@/types/teamSelect';
 import { storeToRefs } from 'pinia';
 import Card from 'primevue/card';
+import Skeleton from 'primevue/skeleton';
 import { computed, watch } from 'vue';
 import ScheduleItem from '../common/ScheduleItem.vue';
 import MatchSupportButton from './MatchSupportButton.vue';
@@ -17,7 +18,7 @@ const uiStore = useUiStore();
 const dataStore = useRmDataStore();
 const matchEngagement = useMatchEngagementStore();
 
-const { runningMatchForSelectedZone } = storeToRefs(dataStore);
+const { runningMatchForSelectedZone, streamLoading, liveGameInfo } = storeToRefs(dataStore);
 const { pkEnabled } = storeToRefs(uiStore);
 
 const runningLiving = computed(() => {
@@ -29,6 +30,14 @@ const runningLiving = computed(() => {
   return ['STARTED', 'PLAYING'].includes(u);
 });
 
+const showMatchSkeleton = computed(() => {
+  if (runningMatchForSelectedZone.value) {
+    return false;
+  }
+
+  return streamLoading.value || !liveGameInfo.value;
+});
+
 watch(
   runningMatchForSelectedZone,
   (m) => {
@@ -75,4 +84,42 @@ function onSelectTeam(payload: TeamSelectPayload) {
       </template>
     </ScheduleItem>
   </div>
+
+  <Card v-else-if="showMatchSkeleton" class="match-placeholder-card">
+    <template #content>
+      <div class="match-placeholder">
+        <Skeleton width="100%" height="1.35rem" borderRadius="8px" />
+        <div class="placeholder-row">
+          <Skeleton width="32%" height="3.2rem" borderRadius="10px" />
+          <Skeleton width="10%" height="2.4rem" borderRadius="8px" />
+          <Skeleton width="32%" height="3.2rem" borderRadius="10px" />
+        </div>
+      </div>
+    </template>
+  </Card>
 </template>
+
+<style scoped>
+.match-placeholder-card {
+  min-height: 7.2rem;
+}
+
+.match-placeholder {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+
+.placeholder-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.55rem;
+}
+
+@media (max-width: 768px) {
+  .match-placeholder-card {
+    min-height: 6rem;
+  }
+}
+</style>
diff --git a/src/components/panels/ScheduleList.vue b/src/components/panels/ScheduleList.vue
index a4196d1..e7c6e14 100644
--- a/src/components/panels/ScheduleList.vue
+++ b/src/components/panels/ScheduleList.vue
@@ -2,7 +2,7 @@
 import type { TeamSelectPayload } from '@/types/teamSelect';
 import { groupScheduleRowsByDate, type MatchView } from '@/utils/matchView';
 import Divider from 'primevue/divider';
-import { computed } from 'vue';
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import ScheduleItem from '../common/ScheduleItem.vue';
 
 interface Props {
@@ -10,17 +10,164 @@ interface Props {
   teamGroupMap?: Record<string, { group: string; rank: string }>;
   compact?: boolean;
   dateOrder?: 'asc' | 'desc';
+  incremental?: boolean;
+  chunkSize?: number;
+  active?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   dateOrder: 'asc',
+  incremental: true,
+  chunkSize: 24,
+  active: true,
 });
 
 const emit = defineEmits<{
   teamSelect: [payload: TeamSelectPayload];
 }>();
 
-const dateGroups = computed(() => groupScheduleRowsByDate(props.rows, props.dateOrder));
+const visibleCount = ref(0);
+const loadSentinel = ref<HTMLDivElement | null>(null);
+let observer: IntersectionObserver | null = null;
+let fallbackScheduled = false;
+
+const renderedRows = computed(() => {
+  if (!props.incremental) {
+    return props.rows;
+  }
+
+  return props.rows.slice(0, visibleCount.value);
+});
+
+const hasMoreRows = computed(() => props.incremental && visibleCount.value < props.rows.length);
+
+const dateGroups = computed(() => groupScheduleRowsByDate(renderedRows.value, props.dateOrder));
+
+function normalizeChunkSize(): number {
+  const parsed = Number(props.chunkSize ?? 24);
+  if (!Number.isFinite(parsed)) {
+    return 24;
+  }
+  return Math.max(8, Math.floor(parsed));
+}
+
+function resetVisibleCount() {
+  if (!props.incremental) {
+    visibleCount.value = props.rows.length;
+    return;
+  }
+
+  visibleCount.value = Math.min(props.rows.length, normalizeChunkSize());
+}
+
+function loadMoreRows() {
+  if (!hasMoreRows.value) {
+    return;
+  }
+
+  visibleCount.value = Math.min(props.rows.length, visibleCount.value + normalizeChunkSize());
+  void nextTick(() => {
+    checkViewportAndLoadMore();
+  });
+}
+
+function stopObserver() {
+  if (observer) {
+    observer.disconnect();
+    observer = null;
+  }
+}
+
+function setupObserver() {
+  stopObserver();
+  if (!props.active || !hasMoreRows.value || !loadSentinel.value || typeof IntersectionObserver === 'undefined') {
+    return;
+  }
+
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (!entries.some((entry) => entry.isIntersecting)) {
+        return;
+      }
+      loadMoreRows();
+    },
+    {
+      root: null,
+      rootMargin: '640px 0px',
+      threshold: 0,
+    },
+  );
+
+  observer.observe(loadSentinel.value);
+}
+
+function checkViewportAndLoadMore() {
+  if (!props.active || !hasMoreRows.value || !loadSentinel.value || typeof window === 'undefined') {
+    return;
+  }
+
+  const rect = loadSentinel.value.getBoundingClientRect();
+  if (rect.top <= window.innerHeight + 640) {
+    loadMoreRows();
+  }
+}
+
+function scheduleViewportCheck() {
+  if (fallbackScheduled || typeof window === 'undefined') {
+    return;
+  }
+
+  fallbackScheduled = true;
+  window.requestAnimationFrame(() => {
+    fallbackScheduled = false;
+    checkViewportAndLoadMore();
+  });
+}
+
+function onWindowViewportChanged() {
+  scheduleViewportCheck();
+}
+
+watch(
+  () => props.rows,
+  () => {
+    resetVisibleCount();
+    setupObserver();
+    scheduleViewportCheck();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => [props.incremental, props.chunkSize, props.active] as const,
+  () => {
+    resetVisibleCount();
+    setupObserver();
+    scheduleViewportCheck();
+  },
+);
+
+watch(hasMoreRows, () => {
+  setupObserver();
+  scheduleViewportCheck();
+});
+
+onMounted(() => {
+  setupObserver();
+  if (typeof window !== 'undefined') {
+    window.addEventListener('scroll', onWindowViewportChanged, { passive: true });
+    window.addEventListener('resize', onWindowViewportChanged, { passive: true });
+  }
+  scheduleViewportCheck();
+});
+
+onBeforeUnmount(() => {
+  stopObserver();
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('scroll', onWindowViewportChanged);
+    window.removeEventListener('resize', onWindowViewportChanged);
+  }
+});
 
 function onTeamSelect(payload: TeamSelectPayload) {
   emit('teamSelect', payload);
@@ -50,6 +197,10 @@ function onTeamSelect(payload: TeamSelectPayload) {
         @team-select="onTeamSelect"
       />
     </section>
+
+    <div v-if="hasMoreRows" ref="loadSentinel" class="list-tail" aria-hidden="true">
+      <small>正在加载更多赛程...</small>
+    </div>
   </div>
 </template>
 
@@ -72,6 +223,15 @@ function onTeamSelect(payload: TeamSelectPayload) {
   min-width: 0;
 }
 
+.list-tail {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.8rem;
+  padding: 0.35rem 0 0.55rem;
+  color: var(--text-color-secondary);
+}
+
 .date-sticky {
   position: sticky;
   top: var(--schedule-date-sticky-top, 0);
diff --git a/src/components/panels/SchedulePanel.vue b/src/components/panels/SchedulePanel.vue
index 27d6710..d2b7198 100644
--- a/src/components/panels/SchedulePanel.vue
+++ b/src/components/panels/SchedulePanel.vue
@@ -64,7 +64,7 @@ function applyFilters(source: typeof rows.value): typeof rows.value {
 
   if (selectedZone.value.length > 0) {
     const zoneSet = new Set(selectedZone.value);
-    filtered = filtered.filter((item) => zoneSet.has(item.zoneId));
+    filtered = filtered.filter((item) => zoneSet.has(item.zoneId ?? ''));
   }
 
   return filtered;
@@ -85,6 +85,8 @@ const resultRows = computed(() => {
   return filtered.slice().sort((a, b) => (b.startedAtTs ?? 0) - (a.startedAtTs ?? 0));
 });
 
+const listChunkSize = computed(() => (props.isMobile ? 16 : 24));
+
 // Watch team options and reset selection if it becomes invalid
 watch(teamOptions, (options) => {
   const validValues = new Set(options.map((option) => option.value));
@@ -175,6 +177,8 @@ function onTeamSelect(payload: TeamSelectPayload) {
               :rows="recentMatches"
               :team-group-map="props.teamGroupMap"
               :compact="isMobile"
+              :incremental="false"
+              :active="activeTab === 'recent'"
               @team-select="onTeamSelect"
             />
           </TabPanel>
@@ -186,6 +190,8 @@ function onTeamSelect(payload: TeamSelectPayload) {
               :team-group-map="props.teamGroupMap"
               :compact="isMobile"
               date-order="asc"
+              :chunk-size="listChunkSize"
+              :active="activeTab === 'schedule'"
               @team-select="onTeamSelect"
             />
           </TabPanel>
@@ -197,6 +203,8 @@ function onTeamSelect(payload: TeamSelectPayload) {
               :team-group-map="props.teamGroupMap"
               :compact="isMobile"
               date-order="desc"
+              :chunk-size="listChunkSize"
+              :active="activeTab === 'result'"
               @team-select="onTeamSelect"
             />
           </TabPanel>
diff --git a/src/composables/danmuLifecycle.ts b/src/composables/danmuLifecycle.ts
index 735d5d6..50cdd34 100644
--- a/src/composables/danmuLifecycle.ts
+++ b/src/composables/danmuLifecycle.ts
@@ -11,7 +11,11 @@ export function bindDanmuRoomReset(chatRoomId: Ref<string | null>, clearMessages
           to: nextRoomId,
         });
       }
-      clearMessages();
+
+      // Keep cached history on the initial bind; only reset when switching between rooms.
+      if (prevRoomId && nextRoomId !== prevRoomId) {
+        clearMessages();
+      }
     },
   );
 }
diff --git a/src/danmu/im/im.worker.ts b/src/danmu/im/im.worker.ts
index aefa710..c37e93d 100644
--- a/src/danmu/im/im.worker.ts
+++ b/src/danmu/im/im.worker.ts
@@ -390,9 +390,9 @@ class ImRuntime {
     };
 
     const eventMessageName = typeof Event?.MESSAGE === 'string' && Event.MESSAGE.trim() ? Event.MESSAGE : 'message';
-    this.danmuClient.on(eventMessageName, this.danmuClientMessageHandler);
+    this.danmuClient?.on(eventMessageName, this.danmuClientMessageHandler);
     if (eventMessageName !== 'message') {
-      this.danmuClient.on('message', this.danmuClientMessageHandler);
+      this.danmuClient?.on('message', this.danmuClientMessageHandler);
     }
     return this.danmuClient as IMClient;
   }
diff --git a/src/main.ts b/src/main.ts
index 75c04b8..c715cea 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,26 +1,20 @@
 import Aura from '@primeuix/themes/aura';
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import 'primeicons/primeicons.css';
 import PrimeVue from 'primevue/config';
 import ToastService from 'primevue/toastservice';
 import Tooltip from 'primevue/tooltip';
-import { registerSW } from 'virtual:pwa-register';
 import { createApp } from 'vue';
 import App from './App.vue';
-
-const updateServiceWorker = registerSW({
-  immediate: true,
-  onNeedRefresh() {
-    void updateServiceWorker(true).then(() => {
-      window.location.reload();
-    });
-  },
-});
+import { markPerformance } from './utils/observability';
 
 import './styles/mobile-input.css';
 import './styles/primevue-theme.css';
 const app = createApp(App);
-app.use(createPinia());
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+app.use(pinia);
 
 import './styles/danmu-tooltip.css';
 app.use(PrimeVue, {
@@ -35,4 +29,28 @@ app.use(PrimeVue, {
 app.use(ToastService);
 app.directive('tooltip', Tooltip);
 
+markPerformance('rm-app-mount-start');
 app.mount('#app');
+markPerformance('rm-app-mounted');
+
+function registerServiceWorkerWhenIdle() {
+  void import('virtual:pwa-register').then(({ registerSW }) => {
+    const updateServiceWorker = registerSW({
+      immediate: true,
+      onNeedRefresh() {
+        void updateServiceWorker(true).then(() => {
+          window.location.reload();
+        });
+      },
+    });
+  });
+}
+
+if (typeof window !== 'undefined') {
+  const idleScheduler = window.requestIdleCallback;
+  if (typeof idleScheduler === 'function') {
+    idleScheduler(registerServiceWorkerWhenIdle, { timeout: 3000 });
+  } else {
+    window.setTimeout(registerServiceWorkerWhenIdle, 0);
+  }
+}
diff --git a/src/stores/danmu.ts b/src/stores/danmu.ts
index ec5e21b..6fbadb9 100644
--- a/src/stores/danmu.ts
+++ b/src/stores/danmu.ts
@@ -85,4 +85,10 @@ export const useDanmuStore = defineStore('danmu', () => {
     resolveTooltipText,
     resolveTooltipMeta,
   };
+},
+{
+  persist: {
+    key: 'rmlive:danmu-history-cache',
+    pick: ['messages'],
+  },
 });
diff --git a/src/stores/rmData.ts b/src/stores/rmData.ts
index f03245d..46e3cbc 100644
--- a/src/stores/rmData.ts
+++ b/src/stores/rmData.ts
@@ -11,11 +11,14 @@ import type {
 } from '../types/api';
 import type { GroupSection, TeamGroupMeta } from '../utils/groupView';
 import type { MatchView } from '../utils/matchView';
-import { logInfo, logWarn } from '../utils/observability';
+import { logInfo, logWarn, markPerformance, measurePerformance } from '../utils/observability';
 import type { PlayerQualityOption } from '../utils/rmStreamView';
 import { normalizeZoneId, type ZoneOptionItem, type ZoneUiState } from '../utils/zoneView';
 import type {
+  RmDataBootstrapPayload,
   RmDataInitPayload,
+  RmDataPatchPayload,
+  RmDataSnapshotPatch,
   RmDataSnapshot,
   RmDataWorkerIncomingMessage,
   RmDataWorkerOutgoingMessage,
@@ -57,6 +60,7 @@ export const useRmDataStore = defineStore('rm-data', () => {
   let hasManualZoneSelection = false;
   let visibilityListenerAttached = false;
   let workerRestarting = false;
+  let latestSnapshotVersion = 0;
 
   function applySnapshot(snapshot: RmDataSnapshot) {
     liveGameInfo.value = snapshot.liveGameInfo;
@@ -86,6 +90,98 @@ export const useRmDataStore = defineStore('rm-data', () => {
     runningMatchForSelectedZone.value = snapshot.runningMatchForSelectedZone;
   }
 
+  function applySnapshotPatch(patch: RmDataSnapshotPatch) {
+    const keys = Object.keys(patch) as Array<keyof RmDataSnapshotPatch>;
+
+    for (const key of keys) {
+      const value = patch[key];
+      switch (key) {
+        case 'liveGameInfo':
+          liveGameInfo.value = (value as RmDataSnapshot['liveGameInfo']) ?? null;
+          break;
+        case 'currentAndNextMatches':
+          currentAndNextMatches.value = (value as RmDataSnapshot['currentAndNextMatches']) ?? null;
+          break;
+        case 'groupsOrder':
+          groupsOrder.value = (value as RmDataSnapshot['groupsOrder']) ?? null;
+          break;
+        case 'groupRankInfo':
+          groupRankInfo.value = (value as RmDataSnapshot['groupRankInfo']) ?? null;
+          break;
+        case 'robotData':
+          robotData.value = (value as RmDataSnapshot['robotData']) ?? null;
+          break;
+        case 'schedule':
+          schedule.value = (value as RmDataSnapshot['schedule']) ?? null;
+          break;
+        case 'selectedZoneId':
+          selectedZoneId.value = (value as RmDataSnapshot['selectedZoneId']) ?? null;
+          break;
+        case 'effectiveSelectedZoneId':
+          effectiveSelectedZoneId.value = (value as RmDataSnapshot['effectiveSelectedZoneId']) ?? null;
+          break;
+        case 'selectedQualityRes':
+          selectedQualityRes.value = (value as RmDataSnapshot['selectedQualityRes']) ?? null;
+          break;
+        case 'selectedZoneName':
+          selectedZoneName.value = (value as RmDataSnapshot['selectedZoneName']) ?? null;
+          break;
+        case 'selectedZoneUiState':
+          selectedZoneUiState.value = (value as RmDataSnapshot['selectedZoneUiState']) ?? null;
+          break;
+        case 'streamLoading':
+          streamLoading.value = Boolean(value);
+          break;
+        case 'streamErrorMessage':
+          streamErrorMessage.value = String(value ?? '');
+          break;
+        case 'zoneOptions':
+          zoneOptions.value = (value as RmDataSnapshot['zoneOptions']) ?? [];
+          break;
+        case 'effectiveStreamUrl':
+          effectiveStreamUrl.value = (value as RmDataSnapshot['effectiveStreamUrl']) ?? null;
+          break;
+        case 'effectiveStreamErrorMessage':
+          effectiveStreamErrorMessage.value = String(value ?? '');
+          break;
+        case 'groupSections':
+          groupSections.value = (value as RmDataSnapshot['groupSections']) ?? [];
+          break;
+        case 'teamGroupMap':
+          teamGroupMap.value = (value as RmDataSnapshot['teamGroupMap']) ?? {};
+          break;
+        case 'scheduleEventTitle':
+          scheduleEventTitle.value = String(value ?? '');
+          break;
+        case 'playerQualityOptions':
+          playerQualityOptions.value = (value as RmDataSnapshot['playerQualityOptions']) ?? [];
+          break;
+        case 'selectedZoneChatRoomId':
+          selectedZoneChatRoomId.value = (value as RmDataSnapshot['selectedZoneChatRoomId']) ?? null;
+          break;
+        case 'scheduleMatchRows':
+          scheduleMatchRows.value = (value as RmDataSnapshot['scheduleMatchRows']) ?? [];
+          break;
+        case 'runningMatchForSelectedZone':
+          runningMatchForSelectedZone.value = (value as RmDataSnapshot['runningMatchForSelectedZone']) ?? null;
+          break;
+      }
+    }
+  }
+
+  function applyBootstrapPayload(payload: RmDataBootstrapPayload) {
+    latestSnapshotVersion = payload.version;
+    applySnapshot(payload.snapshot);
+  }
+
+  function applyPatchPayload(payload: RmDataPatchPayload) {
+    if (payload.version <= latestSnapshotVersion) {
+      return;
+    }
+    latestSnapshotVersion = payload.version;
+    applySnapshotPatch(payload.patch);
+  }
+
   function buildInitPayload(): RmDataInitPayload {
     return {
       historySelectedZoneId: historySelectedZoneId.value,
@@ -142,7 +238,13 @@ export const useRmDataStore = defineStore('rm-data', () => {
       }
 
       if (data.type === 'BOOTSTRAP_STATE' || data.type === 'PATCH_STATE') {
-        applySnapshot(data.payload);
+        if (data.type === 'BOOTSTRAP_STATE') {
+          applyBootstrapPayload(data.payload);
+          markPerformance('rm-data-bootstrap-received');
+          measurePerformance('rm-startup-to-bootstrap', 'rm-app-mount-start', 'rm-data-bootstrap-received');
+        } else {
+          applyPatchPayload(data.payload);
+        }
         return;
       }
 
@@ -199,7 +301,9 @@ export const useRmDataStore = defineStore('rm-data', () => {
 
   function startWorker() {
     isStopping = false;
+    latestSnapshotVersion = 0;
     const currentWorker = spawnWorker();
+    markPerformance('rm-data-worker-init-dispatched');
     currentWorker.postMessage({ type: 'INIT', payload: buildInitPayload() });
     attachVisibilityListener();
     setVisibilityInWorker();
@@ -246,8 +350,14 @@ export const useRmDataStore = defineStore('rm-data', () => {
   function startPolling() {
     stopWorker();
     hasManualZoneSelection = false;
-    streamLoading.value = true;
-    streamErrorMessage.value = '';
+    const hasWarmCache =
+      Boolean(effectiveStreamUrl.value) ||
+      Boolean(runningMatchForSelectedZone.value) ||
+      scheduleMatchRows.value.length > 0;
+    streamLoading.value = !hasWarmCache;
+    if (!hasWarmCache) {
+      streamErrorMessage.value = '';
+    }
     startWorker();
   }
 
@@ -289,4 +399,26 @@ export const useRmDataStore = defineStore('rm-data', () => {
     stopPolling,
     retryLiveStream,
   };
+},
+{
+  persist: {
+    key: 'rmlive:rm-data-cache',
+    pick: [
+      'liveGameInfo',
+      'selectedZoneId',
+      'effectiveSelectedZoneId',
+      'selectedQualityRes',
+      'selectedZoneName',
+      'selectedZoneUiState',
+      'zoneOptions',
+      'effectiveStreamUrl',
+      'effectiveStreamErrorMessage',
+      'playerQualityOptions',
+      'selectedZoneChatRoomId',
+      'scheduleEventTitle',
+      'scheduleMatchRows',
+      'runningMatchForSelectedZone',
+      'teamGroupMap',
+    ],
+  },
 });
diff --git a/src/utils/observability.ts b/src/utils/observability.ts
index 1aa03ff..20bb920 100644
--- a/src/utils/observability.ts
+++ b/src/utils/observability.ts
@@ -49,3 +49,32 @@ export function logWarn(scope: string, message: string, meta?: LogMeta): void {
 
   console.warn(withPrefix(scope, message));
 }
+
+export function markPerformance(name: string): void {
+  if (typeof performance === 'undefined' || typeof performance.mark !== 'function') {
+    return;
+  }
+
+  try {
+    performance.mark(name);
+  } catch {
+    // ignore duplicate marks or unsupported contexts
+  }
+}
+
+export function measurePerformance(name: string, startMark: string, endMark?: string): void {
+  if (typeof performance === 'undefined' || typeof performance.measure !== 'function') {
+    return;
+  }
+
+  try {
+    if (endMark) {
+      performance.measure(name, startMark, endMark);
+      return;
+    }
+
+    performance.measure(name, startMark);
+  } catch {
+    // ignore missing marks or duplicate measures
+  }
+}
diff --git a/src/workers/rmData.worker.ts b/src/workers/rmData.worker.ts
index 393cc83..cf5961a 100644
--- a/src/workers/rmData.worker.ts
+++ b/src/workers/rmData.worker.ts
@@ -31,7 +31,13 @@ import {
 } from '../utils/rmStreamView';
 import { getNowEpochSeconds } from '../utils/timeNow';
 import { normalizeZoneId, resolveZoneUiState, toZoneOptionItem, type ZoneOptionItem } from '../utils/zoneView';
-import type { RmDataInitPayload, RmDataSnapshot, RmDataWorkerIncomingMessage } from './rmDataProtocol';
+import { markPerformance } from '../utils/observability';
+import type {
+  RmDataInitPayload,
+  RmDataSnapshot,
+  RmDataSnapshotPatch,
+  RmDataWorkerIncomingMessage,
+} from './rmDataProtocol';
 
 declare const self: DedicatedWorkerGlobalScope;
 
@@ -78,7 +84,92 @@ let stopped = false;
 let bootstrapToken = 0;
 let streamProbeToken = 0;
 let snapshotTimer: ReturnType<typeof setTimeout> | null = null;
-let pendingSnapshotKind: 'BOOTSTRAP_STATE' | 'PATCH_STATE' | null = null;
+let pendingBootstrapSnapshot = false;
+let pendingPatchKeys = new Set<keyof RmDataSnapshot>();
+let snapshotVersion = 0;
+let lastPostedSnapshot: RmDataSnapshot | null = null;
+
+const SNAPSHOT_KEYS: Array<keyof RmDataSnapshot> = [
+  'liveGameInfo',
+  'currentAndNextMatches',
+  'groupsOrder',
+  'groupRankInfo',
+  'robotData',
+  'schedule',
+  'selectedZoneId',
+  'effectiveSelectedZoneId',
+  'selectedQualityRes',
+  'selectedZoneName',
+  'selectedZoneUiState',
+  'streamLoading',
+  'streamErrorMessage',
+  'zoneOptions',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'groupSections',
+  'teamGroupMap',
+  'scheduleEventTitle',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+];
+
+const STREAM_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = [
+  'liveGameInfo',
+  'selectedZoneId',
+  'effectiveSelectedZoneId',
+  'selectedQualityRes',
+  'selectedZoneName',
+  'selectedZoneUiState',
+  'streamLoading',
+  'streamErrorMessage',
+  'zoneOptions',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+  'groupSections',
+  'teamGroupMap',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+];
+
+const MATCH_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = [
+  'currentAndNextMatches',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+];
+
+const GROUP_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = ['groupsOrder', 'groupSections', 'teamGroupMap'];
+
+const STREAM_STATUS_KEYS: Array<keyof RmDataSnapshot> = [
+  'streamLoading',
+  'streamErrorMessage',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'selectedZoneUiState',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+];
+
+const SCHEDULE_DOMAIN_KEYS: Array<keyof RmDataSnapshot> = [
+  'schedule',
+  'scheduleEventTitle',
+  'scheduleMatchRows',
+  'runningMatchForSelectedZone',
+  'selectedZoneId',
+  'effectiveSelectedZoneId',
+  'selectedZoneName',
+  'selectedZoneUiState',
+  'zoneOptions',
+  'effectiveStreamUrl',
+  'effectiveStreamErrorMessage',
+  'groupSections',
+  'teamGroupMap',
+  'playerQualityOptions',
+  'selectedZoneChatRoomId',
+];
 
 interface PollingLoop {
   start: () => void;
@@ -216,12 +307,57 @@ function buildSnapshot(): RmDataSnapshot {
   };
 }
 
-function scheduleSnapshot(kind: 'BOOTSTRAP_STATE' | 'PATCH_STATE') {
+function isSnapshotValueEqual(a: unknown, b: unknown): boolean {
+  if (Object.is(a, b)) {
+    return true;
+  }
+
+  if (a == null || b == null) {
+    return false;
+  }
+
+  if (typeof a !== 'object' || typeof b !== 'object') {
+    return false;
+  }
+
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+
+function buildSnapshotPatch(
+  nextSnapshot: RmDataSnapshot,
+  prevSnapshot: RmDataSnapshot,
+  keys: Array<keyof RmDataSnapshot>,
+): RmDataSnapshotPatch {
+  const patch: RmDataSnapshotPatch = {};
+  const patchTarget = patch as Record<string, unknown>;
+
+  for (const key of keys) {
+    if (isSnapshotValueEqual(nextSnapshot[key], prevSnapshot[key])) {
+      continue;
+    }
+
+    patchTarget[key] = nextSnapshot[key];
+  }
+
+  return patch;
+}
+
+function scheduleSnapshot(kind: 'BOOTSTRAP_STATE' | 'PATCH_STATE', keys: Array<keyof RmDataSnapshot> = SNAPSHOT_KEYS) {
   if (stopped) {
     return;
   }
 
-  pendingSnapshotKind = pendingSnapshotKind === 'BOOTSTRAP_STATE' ? 'BOOTSTRAP_STATE' : kind;
+  if (kind === 'BOOTSTRAP_STATE') {
+    pendingBootstrapSnapshot = true;
+  } else {
+    for (const key of keys) {
+      pendingPatchKeys.add(key);
+    }
+  }
 
   if (snapshotTimer) {
     clearTimeout(snapshotTimer);
@@ -229,9 +365,43 @@ function scheduleSnapshot(kind: 'BOOTSTRAP_STATE' | 'PATCH_STATE') {
 
   snapshotTimer = setTimeout(() => {
     snapshotTimer = null;
-    const snapshotKind = pendingSnapshotKind ?? 'PATCH_STATE';
-    pendingSnapshotKind = null;
-    self.postMessage({ type: snapshotKind, payload: buildSnapshot() });
+    const snapshot = buildSnapshot();
+
+    if (pendingBootstrapSnapshot || !lastPostedSnapshot) {
+      snapshotVersion += 1;
+      self.postMessage({
+        type: 'BOOTSTRAP_STATE',
+        payload: {
+          version: snapshotVersion,
+          snapshot,
+        },
+      });
+      pendingBootstrapSnapshot = false;
+      pendingPatchKeys.clear();
+      lastPostedSnapshot = snapshot;
+      return;
+    }
+
+    const keysToCompare = pendingPatchKeys.size ? [...pendingPatchKeys] : SNAPSHOT_KEYS;
+    const patch = buildSnapshotPatch(snapshot, lastPostedSnapshot, keysToCompare);
+    pendingPatchKeys.clear();
+
+    if (Object.keys(patch).length === 0) {
+      return;
+    }
+
+    snapshotVersion += 1;
+    self.postMessage({
+      type: 'PATCH_STATE',
+      payload: {
+        version: snapshotVersion,
+        patch,
+      },
+    });
+    lastPostedSnapshot = {
+      ...lastPostedSnapshot,
+      ...patch,
+    } as RmDataSnapshot;
   }, 32);
 }
 
@@ -369,7 +539,7 @@ async function probeSelectedStreamAvailability(options: { showLoading: boolean }
 
   if (options.showLoading) {
     state.streamLoading = true;
-    scheduleSnapshot('PATCH_STATE');
+    scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
   }
 
   if (!streamUrl) {
@@ -381,7 +551,7 @@ async function probeSelectedStreamAvailability(options: { showLoading: boolean }
     if (options.showLoading) {
       state.streamLoading = false;
     }
-    scheduleSnapshot('PATCH_STATE');
+    scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
     return;
   }
 
@@ -394,7 +564,7 @@ async function probeSelectedStreamAvailability(options: { showLoading: boolean }
   if (options.showLoading) {
     state.streamLoading = false;
   }
-  scheduleSnapshot('PATCH_STATE');
+  scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
 }
 
 function stopAll() {
@@ -404,30 +574,37 @@ function stopAll() {
     clearTimeout(snapshotTimer);
     snapshotTimer = null;
   }
-  pendingSnapshotKind = null;
+  pendingBootstrapSnapshot = false;
+  pendingPatchKeys.clear();
+  lastPostedSnapshot = null;
+  snapshotVersion = 0;
   pollingLoops.forEach((loop) => loop.stop());
   pollingLoops.clear();
 }
 
-async function runBootstrap(payload: RmDataInitPayload) {
+async function runBootstrap(_payload: RmDataInitPayload) {
   const token = ++bootstrapToken;
   const startedAt = Date.now();
 
-  const results = await Promise.allSettled([
+  const criticalResultsPromise = Promise.allSettled([
     withBootstrapTimeout(fetchLiveGameInfo(), startedAt),
     withBootstrapTimeout(fetchCurrentAndNextMatches(), startedAt),
     withBootstrapTimeout(fetchGroupsOrder(), startedAt),
+  ]);
+
+  const secondaryResultsPromise = Promise.allSettled([
     withBootstrapTimeout(fetchSchedule(), startedAt),
     withBootstrapTimeout(fetchRobotData(), startedAt),
     withBootstrapTimeout(fetchGroupRankInfo(), startedAt),
   ]);
 
+  const results = await criticalResultsPromise;
+
   if (stopped || token !== bootstrapToken) {
     return;
   }
 
-  const [liveGameInfoResult, currentAndNextResult, groupsOrderResult, scheduleResult, robotResult, groupRankResult] =
-    results;
+  const [liveGameInfoResult, currentAndNextResult, groupsOrderResult] = results;
 
   if (liveGameInfoResult.status === 'fulfilled') {
     state.liveGameInfo = liveGameInfoResult.value;
@@ -438,23 +615,11 @@ async function runBootstrap(payload: RmDataInitPayload) {
   if (groupsOrderResult.status === 'fulfilled') {
     state.groupsOrder = groupsOrderResult.value;
   }
-  if (scheduleResult.status === 'fulfilled') {
-    state.schedule = scheduleResult.value;
-  }
-  if (robotResult.status === 'fulfilled') {
-    state.robotData = robotResult.value;
-  }
-  if (groupRankResult.status === 'fulfilled') {
-    state.groupRankInfo = groupRankResult.value;
-  }
 
   const settledResults: Array<[string, PromiseSettledResult<unknown>]> = [
     ['liveGameInfo', liveGameInfoResult],
     ['currentAndNextMatches', currentAndNextResult],
     ['groupsOrder', groupsOrderResult],
-    ['schedule', scheduleResult],
-    ['robotData', robotResult],
-    ['groupRankInfo', groupRankResult],
   ];
 
   const rejectedSources = settledResults.filter(([, result]) => result.status === 'rejected').map(([name]) => name);
@@ -472,9 +637,46 @@ async function runBootstrap(payload: RmDataInitPayload) {
   }
 
   syncSelectionAfterDataChange();
+  state.streamLoading = false;
+  markPerformance('rm-data-bootstrap-critical-ready');
   scheduleSnapshot('BOOTSTRAP_STATE');
-  void probeSelectedStreamAvailability({ showLoading: true });
-  void payload;
+  void probeSelectedStreamAvailability({ showLoading: false });
+
+  void secondaryResultsPromise.then((secondaryResults) => {
+    if (stopped || token !== bootstrapToken) {
+      return;
+    }
+
+    const [scheduleResult, robotResult, groupRankResult] = secondaryResults;
+    if (scheduleResult.status === 'fulfilled') {
+      state.schedule = scheduleResult.value;
+    }
+    if (robotResult.status === 'fulfilled') {
+      state.robotData = robotResult.value;
+    }
+    if (groupRankResult.status === 'fulfilled') {
+      state.groupRankInfo = groupRankResult.value;
+    }
+
+    const secondarySettledResults: Array<[string, PromiseSettledResult<unknown>]> = [
+      ['schedule', scheduleResult],
+      ['robotData', robotResult],
+      ['groupRankInfo', groupRankResult],
+    ];
+    const secondaryRejectedSources = secondarySettledResults
+      .filter(([, result]) => result.status === 'rejected')
+      .map(([name]) => name);
+
+    if (secondaryRejectedSources.length > 0) {
+      postLog('warn', 'bootstrap', 'secondary bootstrap completed with rejected requests', {
+        rejectedSources: secondaryRejectedSources,
+      });
+    }
+
+    syncSelectionAfterDataChange();
+    markPerformance('rm-data-bootstrap-secondary-ready');
+    scheduleSnapshot('PATCH_STATE');
+  });
 }
 
 function startPollingLoops() {
@@ -495,7 +697,7 @@ function startPollingLoops() {
           if (selectedZone && resolveZoneUiState(selectedZone, getNowEpochSeconds()) === 'live') {
             const message = '直播流暂时不可用，请稍后重试';
             setStreamError(message);
-            scheduleSnapshot('PATCH_STATE');
+            scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
           }
           postLog('warn', 'stream', 'live_game_info polling failed', { error: toErrorSummary(error) });
         }
@@ -511,7 +713,7 @@ function startPollingLoops() {
       async () => {
         try {
           state.currentAndNextMatches = await fetchCurrentAndNextMatches();
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', MATCH_DOMAIN_KEYS);
         } catch (error) {
           postLog('warn', 'currentAndNextMatches', 'polling failed', { error: toErrorSummary(error) });
         }
@@ -527,7 +729,7 @@ function startPollingLoops() {
       async () => {
         try {
           state.groupsOrder = await fetchGroupsOrder();
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', GROUP_DOMAIN_KEYS);
         } catch (error) {
           postLog('warn', 'groupsOrder', 'polling failed', { error: toErrorSummary(error) });
         }
@@ -544,7 +746,7 @@ function startPollingLoops() {
         try {
           state.schedule = await fetchSchedule();
           syncSelectionAfterDataChange();
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', SCHEDULE_DOMAIN_KEYS);
         } catch (error) {
           postLog('warn', 'schedule', 'polling failed', { error: toErrorSummary(error) });
         }
@@ -571,6 +773,10 @@ function handleInit(payload: RmDataInitPayload) {
   state.streamLoading = true;
   state.streamErrorMessage = '';
   state.visible = true;
+  pendingBootstrapSnapshot = false;
+  pendingPatchKeys.clear();
+  lastPostedSnapshot = null;
+  snapshotVersion = 0;
   pollingLoops.forEach((loop) => loop.stop());
   pollingLoops.clear();
   void runBootstrap(payload).then(() => {
@@ -613,14 +819,14 @@ self.addEventListener('message', (event: MessageEvent<RmDataWorkerIncomingMessag
     state.selectedZoneId =
       data.payload.zoneId != null && data.payload.zoneId !== '' ? normalizeZoneId(data.payload.zoneId) : null;
     syncSelectionAfterDataChange();
-    void probeSelectedStreamAvailability({ showLoading: true });
+    void probeSelectedStreamAvailability({ showLoading: false });
     return;
   }
 
   if (data.type === 'USER_SELECT_QUALITY') {
     state.selectedQualityRes =
       data.payload.qualityRes && data.payload.qualityRes.trim() ? data.payload.qualityRes : null;
-    void probeSelectedStreamAvailability({ showLoading: true });
+    void probeSelectedStreamAvailability({ showLoading: false });
     return;
   }
 
@@ -641,7 +847,7 @@ self.addEventListener('message', (event: MessageEvent<RmDataWorkerIncomingMessag
       .finally(() => {
         if (state.streamLoading) {
           state.streamLoading = false;
-          scheduleSnapshot('PATCH_STATE');
+          scheduleSnapshot('PATCH_STATE', STREAM_STATUS_KEYS);
         }
       });
   }
diff --git a/src/workers/rmDataProtocol.ts b/src/workers/rmDataProtocol.ts
index 1edcaa5..afb7705 100644
--- a/src/workers/rmDataProtocol.ts
+++ b/src/workers/rmDataProtocol.ts
@@ -44,6 +44,18 @@ export interface RmDataSnapshot {
   runningMatchForSelectedZone: MatchView | null;
 }
 
+export type RmDataSnapshotPatch = Partial<RmDataSnapshot>;
+
+export interface RmDataBootstrapPayload {
+  version: number;
+  snapshot: RmDataSnapshot;
+}
+
+export interface RmDataPatchPayload {
+  version: number;
+  patch: RmDataSnapshotPatch;
+}
+
 export type RmDataWorkerIncomingMessage =
   | { type: 'INIT'; payload: RmDataInitPayload }
   | { type: 'USER_SELECT_ZONE'; payload: { zoneId: string | null } }
@@ -53,8 +65,8 @@ export type RmDataWorkerIncomingMessage =
   | { type: 'STOP' };
 
 export type RmDataWorkerOutgoingMessage =
-  | { type: 'BOOTSTRAP_STATE'; payload: RmDataSnapshot }
-  | { type: 'PATCH_STATE'; payload: RmDataSnapshot }
+  | { type: 'BOOTSTRAP_STATE'; payload: RmDataBootstrapPayload }
+  | { type: 'PATCH_STATE'; payload: RmDataPatchPayload }
   | { type: 'STREAM_ERROR'; payload: { message: string } }
   | {
       type: 'LOG';

From 99b4aa99b32a2157aee51f386c46af77acb21eb9 Mon Sep 17 00:00:00 2001
From: wintbit <wintbit@outlook.com>
Date: Sat, 4 Apr 2026 18:55:21 +0800
Subject: [PATCH 3/4] refactor: optimize chunk size for schedule list and
 improve loading logic

---
 src/components/common/ScheduleItem.vue  |  11 +-
 src/components/live/LivePlayer.vue      | 165 ++++++++++++++++++++++--
 src/components/panels/ScheduleList.vue  |  39 +++---
 src/components/panels/SchedulePanel.vue |   2 +-
 4 files changed, 182 insertions(+), 35 deletions(-)

diff --git a/src/components/common/ScheduleItem.vue b/src/components/common/ScheduleItem.vue
index f9ede6a..3e92ade 100644
--- a/src/components/common/ScheduleItem.vue
+++ b/src/components/common/ScheduleItem.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { TeamSelectPayload } from '@/types/teamSelect';
 import type { MatchView } from '@/utils/matchView';
-import { DeferredContent } from 'primevue';
 import Button from 'primevue/button';
 import Card from 'primevue/card';
 import Tag from 'primevue/tag';
@@ -110,9 +109,8 @@ const slug = computed(() => {
 </script>
 
 <template>
-  <DeferredContent>
-    <Card class="schedule-item" :class="{ compact: props.compact }">
-      <template #content>
+  <Card class="schedule-item" :class="{ compact: props.compact }">
+    <template #content>
         <header class="item-header">
           <span class="event-title">{{ item.eventTitle || '赛事' }}</span>
           <div class="header-center">
@@ -208,9 +206,8 @@ const slug = computed(() => {
           :video-url="item.replayVideo.url"
           :cover-url="item.replayVideo.coverUrl"
         />
-      </template>
-    </Card>
-  </DeferredContent>
+    </template>
+  </Card>
 </template>
 
 <style scoped>
diff --git a/src/components/live/LivePlayer.vue b/src/components/live/LivePlayer.vue
index d8318ec..b34d4a3 100644
--- a/src/components/live/LivePlayer.vue
+++ b/src/components/live/LivePlayer.vue
@@ -50,8 +50,13 @@ const emit = defineEmits<{
 const container = ref<HTMLDivElement | null>(null);
 let player: Artplayer | null = null;
 let playerReady = false;
+const isStreamSwitching = ref(false);
 /** Hls instance for current stream; must be torn down before each new customType load and on player destroy. */
 let liveHls: { destroy: () => void } | null = null;
+let hlsMediaRecoveryCount = 0;
+let hlsLastMediaRecoveryAt = 0;
+let currentAppliedStreamUrl: string | null = null;
+let streamSwitchToken = 0;
 let danmukuPlugin: any = null;
 const pendingDanmuQueue: DanmuMessage[] = [];
 const danmuService = ref<DanmuService | null>(null);
@@ -208,6 +213,8 @@ function destroyAttachedHls() {
     liveHls.destroy();
     liveHls = null;
   }
+  hlsMediaRecoveryCount = 0;
+  hlsLastMediaRecoveryAt = 0;
 }
 
 async function exitPipIfNeeded() {
@@ -246,16 +253,53 @@ async function destroyDanmu() {
 
 function destroyPlayer() {
   playerMountToken += 1;
+  streamSwitchToken += 1;
+  isStreamSwitching.value = false;
   destroyAttachedHls();
   if (player) {
     player.destroy(false);
     player = null;
   }
+  currentAppliedStreamUrl = null;
   danmukuPlugin = null;
   playerReady = false;
   pendingDanmuQueue.length = 0;
 }
 
+function waitForVideoPlayable(video: HTMLVideoElement | null, timeoutMs = 2200): Promise<void> {
+  if (!video) {
+    return Promise.resolve();
+  }
+
+  if (video.readyState >= 3 && !video.paused) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const cleanup = () => {
+      video.removeEventListener('canplay', onReady);
+      video.removeEventListener('playing', onReady);
+      video.removeEventListener('loadeddata', onReady);
+    };
+    const finish = () => {
+      if (settled) {
+        return;
+      }
+      settled = true;
+      cleanup();
+      resolve();
+    };
+    const onReady = () => finish();
+
+    video.addEventListener('canplay', onReady, { once: true });
+    video.addEventListener('playing', onReady, { once: true });
+    video.addEventListener('loadeddata', onReady, { once: true });
+
+    setTimeout(() => finish(), timeoutMs);
+  });
+}
+
 function pushDanmuToPlayer(msg: DanmuMessage) {
   if (!player || !msg.text) {
     return;
@@ -564,18 +608,92 @@ async function mountPlayer(url: string) {
       m3u8(video: HTMLVideoElement, m3u8Url: string) {
         destroyAttachedHls();
         if (HlsCtor.isSupported()) {
+          const hlsErrorEvent = (HlsCtor as any).Events?.ERROR ?? 'hlsError';
+          const hlsNetworkErrorType = (HlsCtor as any).ErrorTypes?.NETWORK_ERROR ?? 'networkError';
+          const hlsMediaErrorType = (HlsCtor as any).ErrorTypes?.MEDIA_ERROR ?? 'mediaError';
+          const hlsBufferStalledDetail = (HlsCtor as any).ErrorDetails?.BUFFER_STALLED_ERROR ?? 'bufferStalledError';
+
           const hls = new HlsCtor({
-            lowLatencyMode: true,
+            // Favor stability over ultra-low latency to avoid frequent stalls on mobile networks.
+            lowLatencyMode: false,
             liveDurationInfinity: true,
-            liveSyncMode: 'edge',
-            backBufferLength: 4,
-            maxBufferLength: 6,
-            maxMaxBufferLength: 18,
-            liveSyncDurationCount: 1,
-            maxLiveSyncPlaybackRate: 1.0,
-            liveSyncOnStallIncrease: 0.25,
+            liveSyncMode: 'buffered',
+            backBufferLength: 20,
+            maxBufferLength: 20,
+            maxMaxBufferLength: 40,
+            maxBufferHole: 0.8,
+            liveSyncDurationCount: 3,
+            maxLiveSyncPlaybackRate: 1.2,
+            liveSyncOnStallIncrease: 1,
+            nudgeOffset: 0.12,
+            nudgeMaxRetry: 8,
+            enableWorker: true,
+            startFragPrefetch: true,
+            testBandwidth: false,
+            manifestLoadingMaxRetry: 4,
+            manifestLoadingRetryDelay: 500,
+            manifestLoadingMaxRetryTimeout: 4000,
+            levelLoadingMaxRetry: 5,
+            levelLoadingRetryDelay: 700,
+            levelLoadingMaxRetryTimeout: 6000,
+            fragLoadingMaxRetry: 6,
+            fragLoadingRetryDelay: 800,
+            fragLoadingMaxRetryTimeout: 10000,
             startLevel: -1,
           });
+
+          hls.on(hlsErrorEvent, (_event: unknown, data: any) => {
+            if (!data) {
+              return;
+            }
+
+            if (data.fatal) {
+              if (data.type === hlsNetworkErrorType) {
+                console.warn('[LivePlayer] HLS fatal network error, restart loading', data);
+                hls.startLoad();
+                return;
+              }
+
+              if (data.type === hlsMediaErrorType) {
+                const now = Date.now();
+                if (now - hlsLastMediaRecoveryAt > 15000) {
+                  hlsMediaRecoveryCount = 0;
+                }
+                hlsLastMediaRecoveryAt = now;
+                hlsMediaRecoveryCount += 1;
+
+                if (hlsMediaRecoveryCount <= 2) {
+                  console.warn('[LivePlayer] HLS fatal media error, recover media', data);
+                  hls.recoverMediaError();
+                  return;
+                }
+
+                if (hlsMediaRecoveryCount === 3 && typeof hls.swapAudioCodec === 'function') {
+                  console.warn('[LivePlayer] HLS media error persists, swap audio codec + recover', data);
+                  hls.swapAudioCodec();
+                  hls.recoverMediaError();
+                  return;
+                }
+
+                console.warn('[LivePlayer] HLS media error recovery exhausted, remount stream', data);
+                emit('retry');
+                return;
+              }
+
+              console.warn('[LivePlayer] HLS unrecoverable fatal error, remount stream', data);
+              emit('retry');
+              return;
+            }
+
+            if (data.details === hlsBufferStalledDetail) {
+              try {
+                void video.play();
+              } catch {
+                // ignore auto-play rejection; user can continue manually
+              }
+            }
+          });
+
           liveHls = hls;
           hls.loadSource(m3u8Url);
           hls.attachMedia(video);
@@ -587,6 +705,7 @@ async function mountPlayer(url: string) {
   };
 
   player = new ArtplayerCtor(playerOptions);
+  currentAppliedStreamUrl = url;
   danmukuPlugin = danmuEnabledAtLoad ? (player as any).plugins?.artplayerPluginDanmuku : null;
 
   // Some browsers still require an explicit play attempt after source mount.
@@ -625,18 +744,33 @@ async function applyStreamUrl(url: string) {
 
   markPerformance('rm-player-url-applied');
 
+  if (url === currentAppliedStreamUrl && player && playerReady) {
+    return;
+  }
+
   if (player && playerReady) {
+    const switchToken = ++streamSwitchToken;
+    isStreamSwitching.value = true;
     try {
       await exitPipIfNeeded();
       await player.switchUrl(url);
+      currentAppliedStreamUrl = url;
+      const video = container.value?.querySelector('video') ?? null;
+      await waitForVideoPlayable(video);
       updateQualityControl();
       return;
     } catch (error) {
       console.warn('[LivePlayer] switchUrl failed, remounting player', error);
+    } finally {
+      if (switchToken === streamSwitchToken) {
+        isStreamSwitching.value = false;
+      }
     }
   }
 
+  isStreamSwitching.value = true;
   await mountPlayer(url);
+  isStreamSwitching.value = false;
 }
 
 watch(
@@ -726,6 +860,11 @@ onBeforeUnmount(async () => {
       <Message severity="warn" :closable="false"> 暂未获取到直播流地址 </Message>
     </div>
 
+    <div v-if="isStreamSwitching && !loading && !errorMessage" class="overlay center overlay-soft" aria-live="polite">
+      <ProgressSpinner style="width: 2rem; height: 2rem" strokeWidth="6" />
+      <span class="switching-tip">切换清晰度中...</span>
+    </div>
+
     <div ref="container" class="player-container" />
 
     <DanmuFilterDialog v-if="danmuEnabledAtLoad" v-model:visible="filterDialogVisible" />
@@ -766,6 +905,16 @@ onBeforeUnmount(async () => {
   text-align: center;
 }
 
+.overlay-soft {
+  z-index: 3;
+  background: linear-gradient(180deg, rgba(9, 16, 33, 0.08), rgba(9, 16, 33, 0.35));
+}
+
+.switching-tip {
+  font-size: 0.85rem;
+  color: rgba(255, 255, 255, 0.92);
+}
+
 .retry-btn {
   margin-top: 0.35rem;
 }
diff --git a/src/components/panels/ScheduleList.vue b/src/components/panels/ScheduleList.vue
index e7c6e14..796b417 100644
--- a/src/components/panels/ScheduleList.vue
+++ b/src/components/panels/ScheduleList.vue
@@ -18,7 +18,7 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   dateOrder: 'asc',
   incremental: true,
-  chunkSize: 24,
+  chunkSize: 10,
   active: true,
 });
 
@@ -30,6 +30,10 @@ const visibleCount = ref(0);
 const loadSentinel = ref<HTMLDivElement | null>(null);
 let observer: IntersectionObserver | null = null;
 let fallbackScheduled = false;
+let appendScheduled = false;
+let lastAppendAt = 0;
+
+const APPEND_COOLDOWN_MS = 100;
 
 const renderedRows = computed(() => {
   if (!props.incremental) {
@@ -44,11 +48,11 @@ const hasMoreRows = computed(() => props.incremental && visibleCount.value < pro
 const dateGroups = computed(() => groupScheduleRowsByDate(renderedRows.value, props.dateOrder));
 
 function normalizeChunkSize(): number {
-  const parsed = Number(props.chunkSize ?? 24);
+  const parsed = Number(props.chunkSize ?? 10);
   if (!Number.isFinite(parsed)) {
-    return 24;
+    return 10;
   }
-  return Math.max(8, Math.floor(parsed));
+  return Math.max(10, Math.floor(parsed));
 }
 
 function resetVisibleCount() {
@@ -61,13 +65,22 @@ function resetVisibleCount() {
 }
 
 function loadMoreRows() {
-  if (!hasMoreRows.value) {
+  if (!hasMoreRows.value || appendScheduled) {
+    return;
+  }
+
+  const now = performance.now();
+  if (now - lastAppendAt < APPEND_COOLDOWN_MS) {
     return;
   }
 
-  visibleCount.value = Math.min(props.rows.length, visibleCount.value + normalizeChunkSize());
+  appendScheduled = true;
+  lastAppendAt = now;
+  const nextCount = Math.min(props.rows.length, visibleCount.value + normalizeChunkSize());
+  visibleCount.value = nextCount;
   void nextTick(() => {
-    checkViewportAndLoadMore();
+    appendScheduled = false;
+    scheduleViewportCheck();
   });
 }
 
@@ -124,10 +137,6 @@ function scheduleViewportCheck() {
   });
 }
 
-function onWindowViewportChanged() {
-  scheduleViewportCheck();
-}
-
 watch(
   () => props.rows,
   () => {
@@ -154,19 +163,11 @@ watch(hasMoreRows, () => {
 
 onMounted(() => {
   setupObserver();
-  if (typeof window !== 'undefined') {
-    window.addEventListener('scroll', onWindowViewportChanged, { passive: true });
-    window.addEventListener('resize', onWindowViewportChanged, { passive: true });
-  }
   scheduleViewportCheck();
 });
 
 onBeforeUnmount(() => {
   stopObserver();
-  if (typeof window !== 'undefined') {
-    window.removeEventListener('scroll', onWindowViewportChanged);
-    window.removeEventListener('resize', onWindowViewportChanged);
-  }
 });
 
 function onTeamSelect(payload: TeamSelectPayload) {
diff --git a/src/components/panels/SchedulePanel.vue b/src/components/panels/SchedulePanel.vue
index d2b7198..235494e 100644
--- a/src/components/panels/SchedulePanel.vue
+++ b/src/components/panels/SchedulePanel.vue
@@ -85,7 +85,7 @@ const resultRows = computed(() => {
   return filtered.slice().sort((a, b) => (b.startedAtTs ?? 0) - (a.startedAtTs ?? 0));
 });
 
-const listChunkSize = computed(() => (props.isMobile ? 16 : 24));
+const listChunkSize = computed(() => 10);
 
 // Watch team options and reset selection if it becomes invalid
 watch(teamOptions, (options) => {

From 19e9556f15e47b2d639e991fcf88a3c5ff90243d Mon Sep 17 00:00:00 2001
From: wintbit <wintbit@outlook.com>
Date: Sat, 4 Apr 2026 19:15:13 +0800
Subject: [PATCH 4/4] style: increase max-width of app shell to 1440px and
 adjust toolbar styles for better layout

---
 src/App.vue                          |  2 +-
 src/components/header/TopToolbar.vue | 65 ++++++++--------------------
 src/components/live/LivePlayer.vue   | 31 +++++++++++--
 src/workers/rmData.worker.ts         |  2 +
 4 files changed, 49 insertions(+), 51 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a3eff6c..99015a4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,7 +110,7 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .app-shell {
-  max-width: 1280px;
+  max-width: 1440px;
   margin: 0 auto;
   padding: 1rem;
   box-sizing: border-box;
diff --git a/src/components/header/TopToolbar.vue b/src/components/header/TopToolbar.vue
index 5c8d9b4..9baa430 100644
--- a/src/components/header/TopToolbar.vue
+++ b/src/components/header/TopToolbar.vue
@@ -209,37 +209,14 @@ const settingsVisible = ref(false);
 
 .top-toolbar :deep(.p-toolbar) {
   min-height: 3.2rem;
-}
-
-@media (min-width: 769px) {
-  .top-toolbar :deep(.p-toolbar) {
-    flex-wrap: nowrap;
-    align-items: center;
-  }
-
-  .top-toolbar :deep(.p-toolbar-start),
-  .top-toolbar :deep(.p-toolbar-center),
-  .top-toolbar :deep(.p-toolbar-end) {
-    min-width: 0;
-  }
-
-  .top-toolbar :deep(.p-toolbar-center) {
-    flex: 1 1 auto;
-    justify-content: center;
-  }
-
-  .top-toolbar :deep(.p-toolbar-end) {
-    flex-shrink: 0;
-    gap: 0.2rem;
-    display: inline-flex;
-    align-items: center;
-  }
+  row-gap: 0.45rem;
 }
 
 .toolbar-brand {
   display: flex;
   align-items: center;
   gap: 0.65rem;
+  min-width: 0;
 }
 
 .brand-logo {
@@ -268,23 +245,29 @@ const settingsVisible = ref(false);
   font-size: 0.78rem;
 }
 
-.toolbar-actions {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
+.zone-select {
+  min-width: 9rem;
+}
+
+.zone-select-button-wrap {
+  width: 100%;
   min-width: 0;
+  max-width: 100%;
 }
 
-.toolbar-actions > * {
-  flex-shrink: 0;
+.zone-select-button-wrap :deep(.p-selectbutton) {
+  width: 100%;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.28rem;
 }
 
-.zone-select {
-  min-width: 9rem;
+.zone-select-button-wrap :deep(.p-togglebutton) {
+  flex: 0 0 auto;
 }
 
-.zone-select-button-wrap {
-  flex: 1;
+.zone-select-button-wrap :deep(.p-togglebutton .p-button-label) {
   min-width: 0;
 }
 
@@ -333,14 +316,6 @@ const settingsVisible = ref(false);
   padding: 0.25rem;
 }
 
-.settings-entry-logo {
-  display: block;
-  width: 1.35rem;
-  height: 1.35rem;
-  object-fit: contain;
-  opacity: 0.92;
-}
-
 @media (width <= 768px) {
   .toolbar-brand-meta h1 {
     font-size: 0.92rem;
@@ -350,10 +325,6 @@ const settingsVisible = ref(false);
     display: none;
   }
 
-  .toolbar-actions {
-    gap: 0.35rem;
-  }
-
   .zone-select {
     min-width: 0;
     flex: 1;
diff --git a/src/components/live/LivePlayer.vue b/src/components/live/LivePlayer.vue
index b34d4a3..ebd830b 100644
--- a/src/components/live/LivePlayer.vue
+++ b/src/components/live/LivePlayer.vue
@@ -57,6 +57,7 @@ let hlsMediaRecoveryCount = 0;
 let hlsLastMediaRecoveryAt = 0;
 let currentAppliedStreamUrl: string | null = null;
 let streamSwitchToken = 0;
+let latestRequestedStreamUrl: string | null = null;
 let danmukuPlugin: any = null;
 const pendingDanmuQueue: DanmuMessage[] = [];
 const danmuService = ref<DanmuService | null>(null);
@@ -742,27 +743,49 @@ async function applyStreamUrl(url: string) {
     return;
   }
 
+  latestRequestedStreamUrl = url;
+  const requestToken = ++streamSwitchToken;
+
   markPerformance('rm-player-url-applied');
 
   if (url === currentAppliedStreamUrl && player && playerReady) {
+    if (requestToken === streamSwitchToken) {
+      isStreamSwitching.value = false;
+    }
     return;
   }
 
   if (player && playerReady) {
-    const switchToken = ++streamSwitchToken;
     isStreamSwitching.value = true;
     try {
       await exitPipIfNeeded();
+      if (requestToken !== streamSwitchToken) {
+        return;
+      }
       await player.switchUrl(url);
+      if (requestToken !== streamSwitchToken) {
+        const pending = latestRequestedStreamUrl;
+        if (pending && pending !== url) {
+          void applyStreamUrl(pending);
+        }
+        return;
+      }
       currentAppliedStreamUrl = url;
       const video = container.value?.querySelector('video') ?? null;
       await waitForVideoPlayable(video);
+      if (requestToken !== streamSwitchToken) {
+        const pending = latestRequestedStreamUrl;
+        if (pending && pending !== url) {
+          void applyStreamUrl(pending);
+        }
+        return;
+      }
       updateQualityControl();
       return;
     } catch (error) {
       console.warn('[LivePlayer] switchUrl failed, remounting player', error);
     } finally {
-      if (switchToken === streamSwitchToken) {
+      if (requestToken === streamSwitchToken) {
         isStreamSwitching.value = false;
       }
     }
@@ -770,7 +793,9 @@ async function applyStreamUrl(url: string) {
 
   isStreamSwitching.value = true;
   await mountPlayer(url);
-  isStreamSwitching.value = false;
+  if (requestToken === streamSwitchToken) {
+    isStreamSwitching.value = false;
+  }
 }
 
 watch(
diff --git a/src/workers/rmData.worker.ts b/src/workers/rmData.worker.ts
index cf5961a..e5317ae 100644
--- a/src/workers/rmData.worker.ts
+++ b/src/workers/rmData.worker.ts
@@ -819,6 +819,7 @@ self.addEventListener('message', (event: MessageEvent<RmDataWorkerIncomingMessag
     state.selectedZoneId =
       data.payload.zoneId != null && data.payload.zoneId !== '' ? normalizeZoneId(data.payload.zoneId) : null;
     syncSelectionAfterDataChange();
+    scheduleSnapshot('PATCH_STATE', STREAM_DOMAIN_KEYS);
     void probeSelectedStreamAvailability({ showLoading: false });
     return;
   }
@@ -826,6 +827,7 @@ self.addEventListener('message', (event: MessageEvent<RmDataWorkerIncomingMessag
   if (data.type === 'USER_SELECT_QUALITY') {
     state.selectedQualityRes =
       data.payload.qualityRes && data.payload.qualityRes.trim() ? data.payload.qualityRes : null;
+    scheduleSnapshot('PATCH_STATE', STREAM_DOMAIN_KEYS);
     void probeSelectedStreamAvailability({ showLoading: false });
     return;
   }