feat: 在 App.vue 组件中添加装饰性背景元素，包括花朵、云朵和彩虹光晕，优化背景样式和动画效果，同时调整 ParticleBackground 组件的粒子数量和样式以提升视觉效果。

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 {

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,
+  color: 0xb4e0f7,
-  lineColor: 0x5ab0d6,
+  lineColor: 0xa8d8ea,
-  lineDistance: 2.5
+  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;
   }
 }