From 298b5410bb50f685f8e6da86391d66b94f335787 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 12:42:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20App.vue=20=E4=B8=AD?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=8A=A8=E7=94=BB=E6=80=A7=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=A1=B5=E9=9D=A2=E5=8F=AF=E8=A7=81=E6=80=A7?=
 =?UTF-8?q?=E6=A3=80=E6=B5=8B=EF=BC=8C=E6=94=AF=E6=8C=81=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E6=9A=82=E5=81=9C=E5=92=8C=E6=81=A2=E5=A4=8D=EF=BC=8C=E5=90=8C?=
 =?UTF-8?q?=E6=97=B6=E6=9B=B4=E6=96=B0=E7=B2=92=E5=AD=90=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=E7=B2=92=E5=AD=90=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=EF=BC=8C=E6=8F=90=E5=8D=87=E6=95=B4=E4=BD=93?=
 =?UTF-8?q?=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           | 52 +++++++++++++++++++++++++--
 src/components/ParticleBackground.vue |  7 ++--
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d8c953d..0ed5b06 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -77,14 +77,37 @@ import WechatModal from './components/WechatModal.vue'
 
 const showWechatModal = ref(false)
 
-// 随机生成元素的初始位置
+// 优化动画性能
 onMounted(() => {
-  const elements = document.querySelectorAll('.floating-element, .floating-bubble')
+  const elements = document.querySelectorAll('.floating-element, .floating-bubble, .floating-flower, .floating-cloud')
   elements.forEach(el => {
     el.style.left = `${Math.random() * 100}vw`
     el.style.top = `${Math.random() * 100}vh`
+    // 添加硬件加速
+    el.style.transform = 'translateZ(0)'
+    el.style.willChange = 'transform'
   })
 })
+
+// 添加页面可见性检测
+onMounted(() => {
+  document.addEventListener('visibilitychange', handleVisibilityChange)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('visibilitychange', handleVisibilityChange)
+})
+
+const handleVisibilityChange = () => {
+  const elements = document.querySelectorAll('.floating-element, .floating-bubble, .floating-flower, .floating-cloud')
+  elements.forEach(el => {
+    if (document.hidden) {
+      el.style.animationPlayState = 'paused'
+    } else {
+      el.style.animationPlayState = 'running'
+    }
+  })
+}
 </script>
 
 <style scoped>
@@ -414,4 +437,29 @@ onMounted(() => {
     opacity: 0.05;
   }
 }
+
+.floating-element,
+.floating-bubble,
+.floating-flower,
+.floating-cloud {
+  will-change: transform;
+  transform: translateZ(0);
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+/* 优化动画性能 */
+@media (prefers-reduced-motion: no-preference) {
+  .floating-element,
+  .floating-bubble,
+  .floating-flower,
+  .floating-cloud {
+    animation-play-state: running;
+  }
+}
+
+/* 添加动画暂停状态 */
+.animation-paused {
+  animation-play-state: paused !important;
+}
 </style>
diff --git a/src/components/ParticleBackground.vue b/src/components/ParticleBackground.vue
index 968bf04..5052ec5 100644
--- a/src/components/ParticleBackground.vue
+++ b/src/components/ParticleBackground.vue
@@ -199,15 +199,14 @@ const animate = () => {
     const time = Date.now() * 0.00005
     particles.material.uniforms.time.value = time
     
-    if (time % 2 === 0) {
-      updateParticles()
-    }
+    // 更新粒子位置
+    updateParticles(time)
     
     renderer.render(scene, camera)
   }
 }
 
-const updateParticles = () => {
+const updateParticles = (time) => {
   const positions = particles.geometry.attributes.position.array
   
   for (let i = 0; i < config.particleCount; i++) {