下雨光标样式测试

docs/.vitepress/theme/cursor-rain-config.ts

@@ -0,0 +1,125 @@
+// 光标雨点效果配置文件
+// 你可以在这里定义不同的配置预设
+
+import type { RainDropOptions } from '../cursor-rain/types'
+
+// 预设配置
+export const rainPresets = {
+  // 默认配置
+  default: {
+    maxDrops: 25,
+    color: 'rgba(173, 216, 230, 0.6)',
+    duration: [1.0, 2.0],
+    dropSize: [3, 8],
+    delay: 100,
+    zIndex: 1000
+  } as RainDropOptions,
+
+  // 轻量模式（适合低性能设备）
+  light: {
+    maxDrops: 15,
+    color: 'rgba(173, 216, 230, 0.5)',
+    duration: [1.2, 2.5],
+    dropSize: [2, 6],
+    delay: 150,
+    zIndex: 1000
+  } as RainDropOptions,
+
+  // 华丽模式
+  fancy: {
+    maxDrops: 40,
+    color: 'rgba(173, 216, 230, 0.8)',
+    duration: [0.8, 1.5],
+    dropSize: [4, 12],
+    delay: 50,
+    zIndex: 1000
+  } as RainDropOptions,
+
+  // 粉色主题
+  pink: {
+    maxDrops: 30,
+    color: 'rgba(255, 182, 193, 0.7)',
+    duration: [1.0, 2.0],
+    dropSize: [3, 9],
+    delay: 80,
+    zIndex: 1000
+  } as RainDropOptions,
+
+  // 绿色主题
+  green: {
+    maxDrops: 25,
+    color: 'rgba(144, 238, 144, 0.7)',
+    duration: [1.0, 2.0],
+    dropSize: [3, 8],
+    delay: 100,
+    zIndex: 1000
+  } as RainDropOptions,
+
+  // 金色主题
+  gold: {
+    maxDrops: 20,
+    color: 'rgba(255, 215, 0, 0.6)',
+    duration: [1.5, 2.5],
+    dropSize: [2, 6],
+    delay: 120,
+    zIndex: 1000
+  } as RainDropOptions,
+
+  // 移动端优化配置
+  mobile: {
+    maxDrops: 10,
+    color: 'rgba(173, 216, 230, 0.5)',
+    duration: [1.5, 3.0],
+    dropSize: [2, 5],
+    delay: 200,
+    zIndex: 1000
+  } as RainDropOptions
+}
+
+// 根据设备类型自动选择配置
+export function getOptimalConfig(): RainDropOptions {
+  if (typeof window === 'undefined') return rainPresets.default
+
+  // 检测移动设备
+  const isMobile = window.innerWidth < 768 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
+  
+  // 检测低性能设备（简单的启发式检测）
+  const isLowPerformance = navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4
+
+  if (isMobile) {
+    return rainPresets.mobile
+  } else if (isLowPerformance) {
+    return rainPresets.light
+  } else {
+    return rainPresets.default
+  }
+}
+
+// 主题配色方案
+export const colorThemes = {
+  blue: 'rgba(100, 149, 237, 0.7)',
+  lightBlue: 'rgba(173, 216, 230, 0.6)',
+  pink: 'rgba(255, 182, 193, 0.7)',
+  green: 'rgba(144, 238, 144, 0.7)',
+  gold: 'rgba(255, 215, 0, 0.6)',
+  purple: 'rgba(147, 112, 219, 0.7)',
+  orange: 'rgba(255, 165, 0, 0.7)',
+  red: 'rgba(255, 99, 99, 0.7)'
+}
+
+// 动态切换主题的函数
+export function switchRainTheme(effect: any, themeName: keyof typeof colorThemes) {
+  const color = colorThemes[themeName]
+  if (color && effect) {
+    effect.updateOptions({ color })
+    
+    // 同时更新CSS类名以应用对应的样式
+    const container = document.querySelector('.cursor-rain-container')
+    if (container) {
+      // 移除所有主题类
+      container.classList.remove('rain-theme-blue', 'rain-theme-pink', 'rain-theme-green', 'rain-theme-gold', 'rain-theme-rainbow')
+      // 添加新主题类
+      container.classList.add(`rain-theme-${themeName}`)
+    }
+  }
+}

docs/.vitepress/theme/cursor-rain-styles.css

@@ -0,0 +1,108 @@
+/* 光标雨点效果自定义样式 */
+
+/* 基础雨点样式 */
+.cursor-rain-container {
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.cursor-rain-container .rain-drop {
+  position: absolute;
+  pointer-events: none;
+  
+  /* 细长雨滴形状 - 更像雨丝的细长形状 - 使用!important覆盖内联样式 */
+  border-radius: 50% 50% 50% 50% / 90% 90% 10% 10% !important;
+  
+  /* 添加一些视觉效果 */
+  box-shadow: 0 0 6px rgba(173, 216, 230, 0.4);
+  filter: blur(0.5px);
+  
+  /* 渐变效果 - 垂直方向的渐变更符合拉长的雨滴 */
+  background: linear-gradient(to bottom, 
+    rgba(173, 216, 230, 0.9) 0%, 
+    rgba(173, 216, 230, 0.7) 50%, 
+    rgba(173, 216, 230, 0.3) 100%) !important;
+}
+
+/* 深色主题适配 */
+@media (prefers-color-scheme: dark) {
+  .cursor-rain-container .rain-drop {
+    background: linear-gradient(to bottom, 
+      rgba(173, 216, 230, 0.7) 0%, 
+      rgba(173, 216, 230, 0.5) 50%, 
+      rgba(173, 216, 230, 0.2) 100%);
+    box-shadow: 0 0 8px rgba(173, 216, 230, 0.3);
+  }
+}
+
+/* 移动端优化 */
+@media (max-width: 768px) {
+  .cursor-rain-container .rain-drop {
+    /* 移动端减少模糊效果以提高性能 */
+    filter: none;
+    box-shadow: 0 0 4px rgba(173, 216, 230, 0.3);
+  }
+}
+
+/* 自定义颜色主题类 */
+.rain-theme-blue .rain-drop {
+  background: linear-gradient(to bottom, 
+    rgba(100, 149, 237, 0.9) 0%, 
+    rgba(100, 149, 237, 0.7) 50%, 
+    rgba(100, 149, 237, 0.3) 100%);
+  box-shadow: 0 0 6px rgba(100, 149, 237, 0.4);
+}
+
+.rain-theme-pink .rain-drop {
+  background: linear-gradient(to bottom, 
+    rgba(255, 182, 193, 0.9) 0%, 
+    rgba(255, 182, 193, 0.7) 50%, 
+    rgba(255, 182, 193, 0.3) 100%);
+  box-shadow: 0 0 6px rgba(255, 182, 193, 0.4);
+}
+
+.rain-theme-green .rain-drop {
+  background: linear-gradient(to bottom, 
+    rgba(144, 238, 144, 0.9) 0%, 
+    rgba(144, 238, 144, 0.7) 50%, 
+    rgba(144, 238, 144, 0.3) 100%);
+  box-shadow: 0 0 6px rgba(144, 238, 144, 0.4);
+}
+
+.rain-theme-gold .rain-drop {
+  background: linear-gradient(to bottom, 
+    rgba(255, 215, 0, 0.9) 0%, 
+    rgba(255, 215, 0, 0.7) 50%, 
+    rgba(255, 215, 0, 0.3) 100%);
+  box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
+}
+
+/* 特殊效果：彩虹雨点 */
+.rain-theme-rainbow .rain-drop:nth-child(6n+1) {
+  background: linear-gradient(to bottom, rgba(255, 99, 99, 0.9) 0%, rgba(255, 99, 99, 0.7) 50%, rgba(255, 99, 99, 0.3) 100%);
+}
+
+.rain-theme-rainbow .rain-drop:nth-child(6n+2) {
+  background: linear-gradient(to bottom, rgba(255, 159, 64, 0.9) 0%, rgba(255, 159, 64, 0.7) 50%, rgba(255, 159, 64, 0.3) 100%);
+}
+
+.rain-theme-rainbow .rain-drop:nth-child(6n+3) {
+  background: linear-gradient(to bottom, rgba(255, 205, 86, 0.9) 0%, rgba(255, 205, 86, 0.7) 50%, rgba(255, 205, 86, 0.3) 100%);
+}
+
+.rain-theme-rainbow .rain-drop:nth-child(6n+4) {
+  background: linear-gradient(to bottom, rgba(75, 192, 192, 0.9) 0%, rgba(75, 192, 192, 0.7) 50%, rgba(75, 192, 192, 0.3) 100%);
+}
+
+.rain-theme-rainbow .rain-drop:nth-child(6n+5) {
+  background: linear-gradient(to bottom, rgba(54, 162, 235, 0.9) 0%, rgba(54, 162, 235, 0.7) 50%, rgba(54, 162, 235, 0.3) 100%);
+}
+
+.rain-theme-rainbow .rain-drop:nth-child(6n+6) {
+  background: linear-gradient(to bottom, rgba(153, 102, 255, 0.9) 0%, rgba(153, 102, 255, 0.7) 50%, rgba(153, 102, 255, 0.3) 100%);
+}

docs/.vitepress/theme/index.ts

@@ -1,10 +1,46 @@
 import BlogTheme from '@sugarat/theme'
+import { initCursorRainForVitePress } from '../cursor-rain/index.esm.js'
+import { gsap } from 'gsap'
+import { getOptimalConfig, rainPresets } from './cursor-rain-config'
 
 // 自定义样式重载
 import './style.scss'
+import './cursor-rain-styles.css'
 
 // 自定义主题色
 // import './user-theme.css'
 
-export default BlogTheme
+export default {
+  ...BlogTheme,
+  enhanceApp({ app, router, siteData }) {
+    // 调用原主题的 enhanceApp
+    if (BlogTheme.enhanceApp) {
+      BlogTheme.enhanceApp({ app, router, siteData })
+    }
+    
+    // 初始化光标雨点效果
+    if (typeof window !== 'undefined') {
+      // 确保 GSAP 可用
+      if (typeof gsap !== 'undefined') {
+        // 使用智能配置，根据设备自动选择最佳设置
+        const config = getOptimalConfig()
+        
+        // 你可以在这里选择不同的预设：
+        // const config = rainPresets.default  // 默认
+        // const config = rainPresets.light    // 轻量模式
+        // const config = rainPresets.fancy    // 华丽模式
+        // const config = rainPresets.pink     // 粉色主题
+        // const config = rainPresets.green    // 绿色主题
+        // const config = rainPresets.gold     // 金色主题
+        
+        const rainEffect = initCursorRainForVitePress(config)
+        
+        // 将雨点效果实例挂载到全局，方便调试和动态控制
+        if (typeof window !== 'undefined') {
+          (window as any).rainEffect = rainEffect
+        }
+      }
+    }
+  }
+}