From 7db6d59780b3cc0fc908675f54ff5fe4ed3ec0ff Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 12:10:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=20App.vue=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=96=B0=E5=A2=9E=E8=83=8C=E6=99=AF=E5=8A=A8=E7=94=BB?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=EF=BC=8C=E4=BC=98=E5=8C=96=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=B9=B6=E5=AE=9E=E7=8E=B0=E9=9A=8F?=
 =?UTF-8?q?=E6=9C=BA=E7=94=9F=E6=88=90=E5=85=83=E7=B4=A0=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=90=8C=E6=97=B6=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E6=9A=97=E8=89=B2=E6=A8=A1=E5=BC=8F=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E5=92=8C=E5=8A=A8=E7=94=BB=E6=80=A7=E8=83=BD=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 95 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 789c26b..025af22 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,11 @@
 <template>
   <div class="app-container">
+    <!-- 背景动画元素 -->
+    <div class="background-animation">
+      <div v-for="n in 12" :key="n" class="floating-element" :style="{ '--delay': `${n * 2}s` }"></div>
+      <div v-for="n in 8" :key="`bubble-${n}`" class="floating-bubble" :style="{ '--delay': `${n * 3}s` }"></div>
+    </div>
+    
     <!-- 3D粒子背景 -->
     <ParticleBackground />
     
@@ -43,22 +49,110 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import ParticleBackground from './components/ParticleBackground.vue'
 import SocialLinks from './components/SocialLinks.vue'
 import Typewriter from './components/Typewriter.vue'
 import WechatModal from './components/WechatModal.vue'
 
 const showWechatModal = ref(false)
+
+// 随机生成元素的初始位置
+onMounted(() => {
+  const elements = document.querySelectorAll('.floating-element, .floating-bubble')
+  elements.forEach(el => {
+    el.style.left = `${Math.random() * 100}vw`
+    el.style.top = `${Math.random() * 100}vh`
+  })
+})
 </script>
 
 <style scoped>
 .app-container {
   min-height: 100vh;
+  background: linear-gradient(135deg, #e0f7fa 0%, #f3e5f5 100%);
   position: relative;
   overflow: hidden;
 }
 
+.background-animation {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.floating-element {
+  position: absolute;
+  width: 60px;
+  height: 60px;
+  background: linear-gradient(45deg, rgba(255,255,255,0.4), rgba(255,255,255,0.1));
+  border-radius: 20% 60% 40% 80%;
+  animation: float 20s linear infinite;
+  animation-delay: var(--delay);
+  opacity: 0.6;
+  backdrop-filter: blur(2px);
+}
+
+.floating-bubble {
+  position: absolute;
+  width: 40px;
+  height: 40px;
+  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.8), rgba(255,255,255,0.1));
+  border-radius: 50%;
+  animation: bubble 15s ease-in-out infinite;
+  animation-delay: var(--delay);
+  opacity: 0.4;
+}
+
+@keyframes float {
+  0% {
+    transform: translate(-100px, 100vh) rotate(0deg);
+  }
+  100% {
+    transform: translate(calc(100vw + 100px), -100px) rotate(360deg);
+  }
+}
+
+@keyframes bubble {
+  0%, 100% {
+    transform: translate(
+      calc(random(100) * 1vw),
+      calc(100vh + 50px)
+    );
+  }
+  50% {
+    transform: translate(
+      calc(random(100) * 1vw),
+      -50px
+    );
+  }
+}
+
+/* 暗色模式适配 */
+@media (prefers-color-scheme: dark) {
+  .app-container {
+    background: linear-gradient(135deg, #263238 0%, #1a237e 100%);
+  }
+  
+  .floating-element {
+    background: linear-gradient(45deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
+  }
+  
+  .floating-bubble {
+    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
+  }
+}
+
+/* 优化动画性能 */
+@media (prefers-reduced-motion: reduce) {
+  .floating-element,
+  .floating-bubble {
+    animation: none;
+    display: none;
+  }
+}
+
 .content {
   position: relative;
   z-index: var(--z-index-content);