From 5c50c8d70a8f477af4fc863ec2721d2b7276a441 Mon Sep 17 00:00:00 2001
From: Cat Tom <linweijie2015@gmail.com>
Date: Wed, 26 Mar 2025 12:14:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=20App.vue=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=B8=AD=E6=B7=BB=E5=8A=A0=E8=A3=85=E9=A5=B0=E6=80=A7?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E5=85=83=E7=B4=A0=EF=BC=8C=E5=8C=85=E6=8B=AC?=
 =?UTF-8?q?=E8=8A=B1=E6=9C=B5=E3=80=81=E4=BA=91=E6=9C=B5=E5=92=8C=E5=BD=A9?=
 =?UTF-8?q?=E8=99=B9=E5=85=89=E6=99=95=EF=BC=8C=E4=BC=98=E5=8C=96=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E6=A0=B7=E5=BC=8F=E5=92=8C=E5=8A=A8=E7=94=BB=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=EF=BC=8C=E5=90=8C=E6=97=B6=E8=B0=83=E6=95=B4=20Partic?=
 =?UTF-8?q?leBackground=20=E7=BB=84=E4=BB=B6=E7=9A=84=E7=B2=92=E5=AD=90?=
 =?UTF-8?q?=E6=95=B0=E9=87=8F=E5=92=8C=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90?=
 =?UTF-8?q?=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           | 179 +++++++++++++++++++++++++-
 src/components/ParticleBackground.vue |  20 +--
 2 files changed, 187 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 025af22..bc3cb9e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,6 +9,26 @@
     <!-- 3D粒子背景 -->
     <ParticleBackground />
     
+    <!-- 添加装饰性背景元素 -->
+    <div class="decorative-background">
+      <!-- 漂浮的花朵 -->
+      <div v-for="n in 8" :key="`flower-${n}`" 
+           class="floating-flower"
+           :style="{ '--delay': `${n * 3}s` }">
+        <div class="flower-center"></div>
+        <div v-for="p in 5" :key="`petal-${p}`" class="flower-petal"></div>
+      </div>
+      
+      <!-- 漂浮的云朵 -->
+      <div v-for="n in 6" :key="`cloud-${n}`" 
+           class="floating-cloud"
+           :style="{ '--delay': `${n * 4}s` }">
+      </div>
+      
+      <!-- 彩虹渐变光晕 -->
+      <div class="rainbow-glow"></div>
+    </div>
+    
     <!-- 主内容区 -->
     <main class="content">
       <div class="profile-section">
@@ -70,7 +90,11 @@ onMounted(() => {
 <style scoped>
 .app-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #e0f7fa 0%, #f3e5f5 100%);
+  background: linear-gradient(135deg, 
+    #e6f3ff 0%, 
+    #f8f1ff 50%,
+    #fff5f5 100%
+  );
   position: relative;
   overflow: hidden;
 }
@@ -129,10 +153,140 @@ onMounted(() => {
   }
 }
 
+.decorative-background {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* 花朵样式 */
+.floating-flower {
+  position: absolute;
+  width: 30px;
+  height: 30px;
+  animation: floatFlower 20s ease-in-out infinite;
+  animation-delay: var(--delay);
+}
+
+.flower-center {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: #ffd700;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.flower-petal {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: #ffb7d0;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0 0;
+}
+
+.flower-petal:nth-child(1) { transform: rotate(0deg) translate(10px, 0); }
+.flower-petal:nth-child(2) { transform: rotate(72deg) translate(10px, 0); }
+.flower-petal:nth-child(3) { transform: rotate(144deg) translate(10px, 0); }
+.flower-petal:nth-child(4) { transform: rotate(216deg) translate(10px, 0); }
+.flower-petal:nth-child(5) { transform: rotate(288deg) translate(10px, 0); }
+
+/* 云朵样式 */
+.floating-cloud {
+  position: absolute;
+  width: 100px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 20px;
+  animation: floatCloud 25s linear infinite;
+  animation-delay: var(--delay);
+  filter: blur(4px);
+}
+
+.floating-cloud::before,
+.floating-cloud::after {
+  content: '';
+  position: absolute;
+  background: inherit;
+  border-radius: 50%;
+}
+
+.floating-cloud::before {
+  width: 50px;
+  height: 50px;
+  top: -20px;
+  left: 15px;
+}
+
+.floating-cloud::after {
+  width: 40px;
+  height: 40px;
+  top: -15px;
+  right: 15px;
+}
+
+/* 彩虹光晕 */
+.rainbow-glow {
+  position: absolute;
+  top: -50%;
+  left: -50%;
+  width: 200%;
+  height: 200%;
+  background: radial-gradient(
+    circle at center,
+    transparent 0%,
+    rgba(255, 182, 193, 0.1) 40%,
+    rgba(173, 216, 230, 0.1) 60%,
+    rgba(176, 224, 230, 0.05) 80%,
+    transparent 100%
+  );
+  animation: rotateGlow 30s linear infinite;
+}
+
+/* 动画关键帧 */
+@keyframes floatFlower {
+  0%, 100% {
+    transform: translate(
+      calc(random(100) * 1vw),
+      -50px
+    ) rotate(0deg);
+  }
+  50% {
+    transform: translate(
+      calc(random(100) * 1vw),
+      calc(100vh + 50px)
+    ) rotate(360deg);
+  }
+}
+
+@keyframes floatCloud {
+  from {
+    transform: translateX(-150px) translateY(calc(random(50) * 1vh));
+  }
+  to {
+    transform: translateX(calc(100vw + 150px)) translateY(calc(random(50) * 1vh));
+  }
+}
+
+@keyframes rotateGlow {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 /* 暗色模式适配 */
 @media (prefers-color-scheme: dark) {
   .app-container {
-    background: linear-gradient(135deg, #263238 0%, #1a237e 100%);
+    background: linear-gradient(135deg,
+      #1a1f3c 0%,
+      #2a1b3d 50%,
+      #1f1f35 100%
+    );
   }
   
   .floating-element {
@@ -142,15 +296,34 @@ onMounted(() => {
   .floating-bubble {
     background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), rgba(255,255,255,0.05));
   }
+  
+  .floating-flower {
+    opacity: 0.6;
+    filter: brightness(0.8);
+  }
+  
+  .floating-cloud {
+    opacity: 0.3;
+  }
+  
+  .rainbow-glow {
+    opacity: 0.2;
+  }
 }
 
-/* 优化动画性能 */
+/* 性能优化 */
 @media (prefers-reduced-motion: reduce) {
   .floating-element,
   .floating-bubble {
     animation: none;
     display: none;
   }
+  
+  .floating-flower,
+  .floating-cloud,
+  .rainbow-glow {
+    animation: none;
+  }
 }
 
 .content {
diff --git a/src/components/ParticleBackground.vue b/src/components/ParticleBackground.vue
index aca70df..a19dfd5 100644
--- a/src/components/ParticleBackground.vue
+++ b/src/components/ParticleBackground.vue
@@ -12,17 +12,18 @@ const breakpoints = useBreakpoints({
 })
 
 const isMobile = breakpoints.smaller('tablet')
-const particleCount = isMobile.value ? 800 : 1500
+const particleCount = isMobile.value ? 1000 : 1800
 
 // 动画参数
 const config = {
-  particleSize: 1.5,
+  particleSize: 2,
   systemRadius: 15,
-  baseSpeed: 0.2,
+  baseSpeed: 0.15,
   hoverRadius: 3,
-  color: 0x7ac5e8,
-  lineColor: 0x5ab0d6,
-  lineDistance: 2.5
+  color: 0xb4e0f7,
+  lineColor: 0xa8d8ea,
+  lineDistance: 3,
+  particleCount: isMobile.value ? 1000 : 1800
 }
 
 let scene, camera, renderer, particles, lines, mouse = { x: 0, y: 0 }
@@ -220,14 +221,15 @@ onUnmounted(() => {
   height: 100%;
   z-index: var(--z-index-particle);
   pointer-events: none;
-  opacity: 0.6;
+  opacity: 0.4;
+  mix-blend-mode: screen;
   transition: opacity 0.3s ease;
 }
 
-/* 移动设备降低不透明度 */
+/* 移动设备优化 */
 @media (max-width: 768px) {
   .particle-canvas {
-    opacity: 0.3;
+    opacity: 0.2;
   }
 }