feat: 在 App.vue 中优化动画性能，添加页面可见性检测，支持动画暂停和恢复，同时更新粒子背景组件的粒子更新逻辑，提升整体用户体验。

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>

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++) {