From 54e09023f0ed9b202c0cfa4ff762477aa8969753 Mon Sep 17 00:00:00 2001
From: hzj <1304805162@qq.com>
Date: Fri, 15 May 2026 14:40:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E5=BC=B9=E5=B9=95=E7=BB=84=E4=BB=B6):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BD=8E=E7=AB=AF=E6=9C=BA=E5=BC=B9=E5=B9=95?=
 =?UTF-8?q?=E7=AA=81=E7=84=B6=E6=B6=88=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Season3/components/Barrage.vue            | 44 ++++++++++++++++---
 .../Season4/components/Barrage.vue            | 44 ++++++++++++++++---
 .../Season5/components/Barrage.vue            | 44 ++++++++++++++++---
 .../Ranking/Couple/components/Barrage.vue     | 44 ++++++++++++++++---
 4 files changed, 156 insertions(+), 20 deletions(-)

diff --git a/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue b/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
index b84063e..db98f83 100644
--- a/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
+++ b/src/views/Activities/LuckyDollars/Season3/components/Barrage.vue
@@ -1,6 +1,10 @@
 <!-- Barrage.vue 优化版 -->
 <template>
-  <div ref="containerRef" class="barrage-root" :class="{ 'barrage-lite': liteAnimations }">
+  <div
+    ref="containerRef"
+    class="barrage-root"
+    :class="{ 'barrage-lite': liteAnimations, 'barrage-paused': isBarragePaused }"
+  >
     <div
       v-for="(track, index) in visibleTracks"
       :key="index"
@@ -87,6 +91,7 @@ const tracks = ref([[], []])
 const containerRef = ref(null)
 const idCounter = ref(0)
 const currentIndex = ref(0)
+const isBarragePaused = ref(false)
 const liteAnimations = shouldUseLiteAnimations()
 const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
 const effectiveMaxItems = computed(() => (liteAnimations ? Math.min(props.maxItems, 1) : props.maxItems))
@@ -186,7 +191,7 @@ function getNextBarrage() {
 }
 
 function canRunBarrage() {
-  return isPageVisible && isInViewport && props.barrageList.length > 0
+  return !isBarragePaused.value && isPageVisible && isInViewport && props.barrageList.length > 0
 }
 
 function stopBarrage(clearTracks = false) {
@@ -218,9 +223,24 @@ function restartBarrage(clearTracks = false) {
   startBarrage()
 }
 
+function pauseBarrage(clearTracks = false) {
+  isBarragePaused.value = true
+  stopBarrage(clearTracks)
+}
+
+function resumeBarrage() {
+  isBarragePaused.value = false
+  startBarrage()
+}
+
 function handleVisibilityChange() {
   isPageVisible = !document.hidden
-  restartBarrage(true)
+  if (isPageVisible && isInViewport) {
+    resumeBarrage()
+    return
+  }
+
+  pauseBarrage(false)
 }
 
 function setupViewportObserver() {
@@ -231,7 +251,12 @@ function setupViewportObserver() {
   viewportObserver = new IntersectionObserver(
     ([entry]) => {
       isInViewport = entry?.isIntersecting !== false
-      restartBarrage(true)
+      if (isInViewport && isPageVisible) {
+        resumeBarrage()
+        return
+      }
+
+      pauseBarrage(false)
     },
     { rootMargin: '80px 0px', threshold: 0 },
   )
@@ -262,7 +287,12 @@ watch(
   [() => props.barrageList, () => locale.value],
   () => {
     currentIndex.value = 0
-    restartBarrage(true)
+    if (props.barrageList.length === 0) {
+      stopBarrage(true)
+      return
+    }
+
+    restartBarrage(false)
   },
   { deep: false },
 )
@@ -300,6 +330,10 @@ watch(
   will-change: auto;
 }
 
+.barrage-paused .barrage-item {
+  animation-play-state: paused;
+}
+
 .barrage-avatar {
   width: 10vw;
   border-radius: 50%;
diff --git a/src/views/Activities/LuckyDollars/Season4/components/Barrage.vue b/src/views/Activities/LuckyDollars/Season4/components/Barrage.vue
index 2b894ec..315e459 100644
--- a/src/views/Activities/LuckyDollars/Season4/components/Barrage.vue
+++ b/src/views/Activities/LuckyDollars/Season4/components/Barrage.vue
@@ -1,6 +1,10 @@
 <!-- Barrage.vue 优化版 -->
 <template>
-  <div ref="containerRef" class="barrage-root" :class="{ 'barrage-lite': liteAnimations }">
+  <div
+    ref="containerRef"
+    class="barrage-root"
+    :class="{ 'barrage-lite': liteAnimations, 'barrage-paused': isBarragePaused }"
+  >
     <div
       v-for="(track, index) in visibleTracks"
       :key="index"
@@ -92,6 +96,7 @@ const tracks = ref([[], []])
 const containerRef = ref(null)
 const idCounter = ref(0)
 const currentIndex = ref(0)
+const isBarragePaused = ref(false)
 const liteAnimations = shouldUseLiteAnimations()
 const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
 const effectiveMaxItems = computed(() => (liteAnimations ? Math.min(props.maxItems, 1) : props.maxItems))
@@ -182,7 +187,7 @@ function getNextBarrage() {
 }
 
 function canRunBarrage() {
-  return isPageVisible && isInViewport && props.barrageList.length > 0
+  return !isBarragePaused.value && isPageVisible && isInViewport && props.barrageList.length > 0
 }
 
 function stopBarrage(clearTracks = false) {
@@ -214,9 +219,24 @@ function restartBarrage(clearTracks = false) {
   startBarrage()
 }
 
+function pauseBarrage(clearTracks = false) {
+  isBarragePaused.value = true
+  stopBarrage(clearTracks)
+}
+
+function resumeBarrage() {
+  isBarragePaused.value = false
+  startBarrage()
+}
+
 function handleVisibilityChange() {
   isPageVisible = !document.hidden
-  restartBarrage(true)
+  if (isPageVisible && isInViewport) {
+    resumeBarrage()
+    return
+  }
+
+  pauseBarrage(false)
 }
 
 function setupViewportObserver() {
@@ -227,7 +247,12 @@ function setupViewportObserver() {
   viewportObserver = new IntersectionObserver(
     ([entry]) => {
       isInViewport = entry?.isIntersecting !== false
-      restartBarrage(true)
+      if (isInViewport && isPageVisible) {
+        resumeBarrage()
+        return
+      }
+
+      pauseBarrage(false)
     },
     { rootMargin: '80px 0px', threshold: 0 },
   )
@@ -258,7 +283,12 @@ watch(
   [() => props.barrageList, () => locale.value],
   () => {
     currentIndex.value = 0
-    restartBarrage(true)
+    if (props.barrageList.length === 0) {
+      stopBarrage(true)
+      return
+    }
+
+    restartBarrage(false)
   },
   { deep: false },
 )
@@ -296,6 +326,10 @@ watch(
   will-change: auto;
 }
 
+.barrage-paused .barrage-item {
+  animation-play-state: paused;
+}
+
 .barrage-avatar {
   width: 10vw;
   border-radius: 50%;
diff --git a/src/views/Activities/LuckyDollars/Season5/components/Barrage.vue b/src/views/Activities/LuckyDollars/Season5/components/Barrage.vue
index 2b894ec..315e459 100644
--- a/src/views/Activities/LuckyDollars/Season5/components/Barrage.vue
+++ b/src/views/Activities/LuckyDollars/Season5/components/Barrage.vue
@@ -1,6 +1,10 @@
 <!-- Barrage.vue 优化版 -->
 <template>
-  <div ref="containerRef" class="barrage-root" :class="{ 'barrage-lite': liteAnimations }">
+  <div
+    ref="containerRef"
+    class="barrage-root"
+    :class="{ 'barrage-lite': liteAnimations, 'barrage-paused': isBarragePaused }"
+  >
     <div
       v-for="(track, index) in visibleTracks"
       :key="index"
@@ -92,6 +96,7 @@ const tracks = ref([[], []])
 const containerRef = ref(null)
 const idCounter = ref(0)
 const currentIndex = ref(0)
+const isBarragePaused = ref(false)
 const liteAnimations = shouldUseLiteAnimations()
 const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
 const effectiveMaxItems = computed(() => (liteAnimations ? Math.min(props.maxItems, 1) : props.maxItems))
@@ -182,7 +187,7 @@ function getNextBarrage() {
 }
 
 function canRunBarrage() {
-  return isPageVisible && isInViewport && props.barrageList.length > 0
+  return !isBarragePaused.value && isPageVisible && isInViewport && props.barrageList.length > 0
 }
 
 function stopBarrage(clearTracks = false) {
@@ -214,9 +219,24 @@ function restartBarrage(clearTracks = false) {
   startBarrage()
 }
 
+function pauseBarrage(clearTracks = false) {
+  isBarragePaused.value = true
+  stopBarrage(clearTracks)
+}
+
+function resumeBarrage() {
+  isBarragePaused.value = false
+  startBarrage()
+}
+
 function handleVisibilityChange() {
   isPageVisible = !document.hidden
-  restartBarrage(true)
+  if (isPageVisible && isInViewport) {
+    resumeBarrage()
+    return
+  }
+
+  pauseBarrage(false)
 }
 
 function setupViewportObserver() {
@@ -227,7 +247,12 @@ function setupViewportObserver() {
   viewportObserver = new IntersectionObserver(
     ([entry]) => {
       isInViewport = entry?.isIntersecting !== false
-      restartBarrage(true)
+      if (isInViewport && isPageVisible) {
+        resumeBarrage()
+        return
+      }
+
+      pauseBarrage(false)
     },
     { rootMargin: '80px 0px', threshold: 0 },
   )
@@ -258,7 +283,12 @@ watch(
   [() => props.barrageList, () => locale.value],
   () => {
     currentIndex.value = 0
-    restartBarrage(true)
+    if (props.barrageList.length === 0) {
+      stopBarrage(true)
+      return
+    }
+
+    restartBarrage(false)
   },
   { deep: false },
 )
@@ -296,6 +326,10 @@ watch(
   will-change: auto;
 }
 
+.barrage-paused .barrage-item {
+  animation-play-state: paused;
+}
+
 .barrage-avatar {
   width: 10vw;
   border-radius: 50%;
diff --git a/src/views/Ranking/Couple/components/Barrage.vue b/src/views/Ranking/Couple/components/Barrage.vue
index a7a6ada..ae44ae1 100644
--- a/src/views/Ranking/Couple/components/Barrage.vue
+++ b/src/views/Ranking/Couple/components/Barrage.vue
@@ -1,6 +1,10 @@
 <!-- 告白墙弹幕 -->
 <template>
-  <div ref="containerRef" class="barrage-root" :class="{ 'barrage-lite': liteAnimations }">
+  <div
+    ref="containerRef"
+    class="barrage-root"
+    :class="{ 'barrage-lite': liteAnimations, 'barrage-paused': isBarragePaused }"
+  >
     <div
       v-for="(track, index) in visibleTracks"
       :key="index"
@@ -127,6 +131,7 @@ const tracks = ref([[], []])
 const containerRef = ref(null)
 const idCounter = ref(0)
 const currentIndex = ref(0)
+const isBarragePaused = ref(false)
 const liteAnimations = shouldUseLiteAnimations()
 const visibleTracks = computed(() => tracks.value.filter((track) => track.length > 0))
 const effectiveMaxItems = computed(() => (liteAnimations ? Math.min(props.maxItems, 1) : props.maxItems))
@@ -204,7 +209,7 @@ function getNextBarrage() {
 }
 
 function canRunBarrage() {
-  return isPageVisible && isInViewport && props.barrageList.length > 0
+  return !isBarragePaused.value && isPageVisible && isInViewport && props.barrageList.length > 0
 }
 
 function stopBarrage(clearTracks = false) {
@@ -236,9 +241,24 @@ function restartBarrage(clearTracks = false) {
   startBarrage()
 }
 
+function pauseBarrage(clearTracks = false) {
+  isBarragePaused.value = true
+  stopBarrage(clearTracks)
+}
+
+function resumeBarrage() {
+  isBarragePaused.value = false
+  startBarrage()
+}
+
 function handleVisibilityChange() {
   isPageVisible = !document.hidden
-  restartBarrage(true)
+  if (isPageVisible && isInViewport) {
+    resumeBarrage()
+    return
+  }
+
+  pauseBarrage(false)
 }
 
 function setupViewportObserver() {
@@ -249,7 +269,12 @@ function setupViewportObserver() {
   viewportObserver = new IntersectionObserver(
     ([entry]) => {
       isInViewport = entry?.isIntersecting !== false
-      restartBarrage(true)
+      if (isInViewport && isPageVisible) {
+        resumeBarrage()
+        return
+      }
+
+      pauseBarrage(false)
     },
     { rootMargin: '80px 0px', threshold: 0 },
   )
@@ -280,7 +305,12 @@ watch(
   () => props.barrageList,
   () => {
     currentIndex.value = 0
-    restartBarrage(true)
+    if (props.barrageList.length === 0) {
+      stopBarrage(true)
+      return
+    }
+
+    restartBarrage(false)
   },
   { deep: false },
 )
@@ -324,6 +354,10 @@ watch(
   will-change: auto;
 }
 
+.barrage-paused .barrage-item {
+  animation-play-state: paused;
+}
+
 .avatar-pair {
   position: relative;
   display: flex;