BA-VitePress-Pages/.vitepress/theme/components/Fireworks.vue

<template>
  <canvas class="fireworks"></canvas>
</template>

<script setup lang="ts">
import { onMounted, watch, onUnmounted } from 'vue'
import { useStore } from '../store'
import anime from 'animejs'

interface MinMax {
  min: number
  max: number
}

interface FireworksConfig {
  colors: string[]
  numberOfParticles: number
  orbitRadius: MinMax
  circleRadius: MinMax
  diffuseRadius: MinMax
  animeDuration: MinMax
}

interface Particle {
  x: number
  y: number
  color?: string
  radius?: number
  alpha?: number
  angle?: number
  lineWidth?: number
  endPos?: { x: number; y: number }
  draw?: () => void
}

const { state } = useStore()

// 清理函数
function cleanup() {
  document.removeEventListener('mousedown', handleMouseDown)
  window.removeEventListener('resize', handleResize)
}

// 将事件处理函数提取出来以便解绑
let handleMouseDown: (e: MouseEvent) => void
let handleResize: () => void

function createFireworks() {
  // 确保在重新创建前清理
  cleanup()
  
  const lightColors = ['102, 167, 221', '62, 131, 225', '33, 78, 194']
  const darkColors = ['252, 146, 174', '202, 180, 190', '207, 198, 255']
  
  const defaultConfig: FireworksConfig = {
    colors: state.darkMode === 'dark' ? darkColors : lightColors,
    numberOfParticles: 20,
    orbitRadius: { min: 50, max: 100 },
    circleRadius: { min: 10, max: 20 },
    diffuseRadius: { min: 50, max: 100 },
    animeDuration: { min: 900, max: 1500 },
  }

  let pointerX = 0
  let pointerY = 0
  const colors = defaultConfig.colors

  const canvasEl = document.querySelector('.fireworks') as HTMLCanvasElement
  const ctx = canvasEl.getContext('2d')!

  function setCanvasSize(canvasEl: HTMLCanvasElement) {
    canvasEl.width = window.innerWidth
    canvasEl.height = window.innerHeight
    canvasEl.style.width = `${window.innerWidth}px`
    canvasEl.style.height = `${window.innerHeight}px`
  }

  function updateCoords(e: MouseEvent | TouchEvent) {
    pointerX = e instanceof MouseEvent ? e.clientX : e.touches[0]?.clientX || e.changedTouches[0]?.clientX
    pointerY = e instanceof MouseEvent ? e.clientY : e.touches[0]?.clientY || e.changedTouches[0]?.clientY
  }

  function setParticleDirection(p: Particle) {
    const angle = (anime.random(0, 360) * Math.PI) / 180
    const value = anime.random(defaultConfig.diffuseRadius.min, defaultConfig.diffuseRadius.max)
    const radius = [-1, 1][anime.random(0, 1)] * value
    return {
      x: p.x + radius * Math.cos(angle),
      y: p.y + radius * Math.sin(angle),
    }
  }

  function createParticle(x: number, y: number): Particle {
    const p: Particle = {
      x,
      y,
      color: `rgba(${colors[anime.random(0, colors.length - 1)]},${anime.random(0.2, 0.8)})`,
      radius: anime.random(defaultConfig.circleRadius.min, defaultConfig.circleRadius.max),
      angle: anime.random(0, 360),
      endPos: setParticleDirection({ x, y }),
      draw() {
        ctx.save()
        ctx.translate(this.x, this.y)
        ctx.rotate((this.angle * Math.PI) / 180)
        ctx.beginPath()
        ctx.moveTo(0, -this.radius!)
        ctx.lineTo(this.radius! * Math.sin(Math.PI / 3), this.radius! * Math.cos(Math.PI / 3))
        ctx.lineTo(-this.radius! * Math.sin(Math.PI / 3), this.radius! * Math.cos(Math.PI / 3))
        ctx.closePath()
        ctx.fillStyle = this.color!
        ctx.fill()
        ctx.restore()
      },
    }
    return p
  }

  function createCircle(x: number, y: number): Particle {
    const p: Particle = {
      x,
      y,
      color: state.darkMode === 'dark' ? 'rgb(233, 179, 237)' : 'rgb(106, 159, 255)',
      radius: 0.1,
      alpha: 0.5,
      lineWidth: 6,
      draw() {
        ctx.globalAlpha = this.alpha!
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.radius!, 0, 2 * Math.PI, true)
        ctx.lineWidth = this.lineWidth!
        ctx.strokeStyle = this.color!
        ctx.stroke()
        ctx.globalAlpha = 1
      },
    }
    return p
  }

  function renderParticle(anim: anime.AnimeInstance) {
    anim.animatables.forEach(animatable => {
      const target = animatable.target as unknown as Particle
      if (typeof target.draw === 'function') {
        target.draw()
      }
    })
  }

  function animateParticles(x: number, y: number) {
    const circle = createCircle(x, y)
    const particles: Particle[] = Array.from({ length: defaultConfig.numberOfParticles }, () => createParticle(x, y))

    anime.timeline()
      .add({
        targets: particles,
        x(p: Particle) { return p.endPos!.x },
        y(p: Particle) { return p.endPos!.y },
        radius: 0,
        duration: anime.random(defaultConfig.animeDuration.min, defaultConfig.animeDuration.max),
        easing: 'easeOutExpo',
        update: renderParticle,
      })
      .add({
        targets: circle,
        radius: anime.random(defaultConfig.orbitRadius.min, defaultConfig.orbitRadius.max),
        lineWidth: 0,
        alpha: {
          value: 0,
          easing: 'linear',
          duration: anime.random(600, 800),
        },
        duration: anime.random(1200, 1800),
        easing: 'easeOutExpo',
        update: renderParticle,
      }, 0)
  }

  const render = anime({
    duration: Number.POSITIVE_INFINITY,
    update: () => {
      ctx.clearRect(0, 0, canvasEl.width, canvasEl.height)
    },
  })

  handleResize = () => setCanvasSize(canvasEl)
  handleMouseDown = (e: MouseEvent) => {
    render.play()
    updateCoords(e)
    animateParticles(pointerX, pointerY)
  }

  document.addEventListener('mousedown', handleMouseDown)
  window.addEventListener('resize', handleResize)
  setCanvasSize(canvasEl)
}

onMounted(() => {
  createFireworks()
})

// 监听暗色模式变化
watch(() => state.darkMode, () => {
  createFireworks()
})

// 组件卸载时清理
onUnmounted(() => {
  cleanup()
})
</script>

<style scoped>
.fireworks {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  pointer-events: none;
}
</style>