feat(ui): 添加粒子背景和星空背景组件

- 新增 ParticlesBg 组件，实现动态粒子效果背景
- 新增 StarsBackground 组件，创建可交互的星空背景
- 支持自定义颜色、数量、动画速度等属性配置
- 集成鼠标交互，实现视差效果和动态跟随
- 导出两个新组件便于全局使用

src/components/ui/bg-stars/StarsBackground.vue

@@ -0,0 +1,176 @@
+<template>
+  <div
+    :class="
+      cn(
+        'relative size-full overflow-hidden bg-[radial-gradient(ellipse_at_bottom,_#262626_0%,_#000_100%)]',
+        props.class,
+      )
+    "
+    @mousemove="handleMouseMove"
+  >
+    <motion.div :style="{ x: springX, y: springY }">
+      <!-- Star Layer 1 -->
+      <motion.div
+        class="absolute top-0 left-0 w-full h-[2000px]"
+        :animate="{ y: [0, -2000] }"
+        :transition="starLayer1Transition"
+      >
+        <div
+          class="absolute bg-transparent rounded-full"
+          :style="{
+            width: '1px',
+            height: '1px',
+            boxShadow: boxShadow1,
+          }"
+        />
+        <div
+          class="absolute bg-transparent rounded-full top-[2000px]"
+          :style="{
+            width: '1px',
+            height: '1px',
+            boxShadow: boxShadow1,
+          }"
+        />
+      </motion.div>
+
+      <!-- Star Layer 2 -->
+      <motion.div
+        class="absolute top-0 left-0 w-full h-[2000px]"
+        :animate="{ y: [0, -2000] }"
+        :transition="starLayer2Transition"
+      >
+        <div
+          class="absolute bg-transparent rounded-full"
+          :style="{
+            width: '2px',
+            height: '2px',
+            boxShadow: boxShadow2,
+          }"
+        />
+        <div
+          class="absolute bg-transparent rounded-full top-[2000px]"
+          :style="{
+            width: '2px',
+            height: '2px',
+            boxShadow: boxShadow2,
+          }"
+        />
+      </motion.div>
+
+      <!-- Star Layer 3 -->
+      <motion.div
+        class="absolute top-0 left-0 w-full h-[2000px]"
+        :animate="{ y: [0, -2000] }"
+        :transition="starLayer3Transition"
+      >
+        <div
+          class="absolute bg-transparent rounded-full"
+          :style="{
+            width: '3px',
+            height: '3px',
+            boxShadow: boxShadow3,
+          }"
+        />
+        <div
+          class="absolute bg-transparent rounded-full top-[2000px]"
+          :style="{
+            width: '3px',
+            height: '3px',
+            boxShadow: boxShadow3,
+          }"
+        />
+      </motion.div>
+    </motion.div>
+
+    <!-- Slot for child content -->
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SpringOptions } from "motion-v";
+import { cn } from "@/lib/utils";
+import { motion, useMotionValue, useSpring } from "motion-v";
+import { computed, onMounted, ref, watch } from "vue";
+
+interface StarsBackgroundProps {
+  factor?: number;
+  speed?: number;
+  transition?: SpringOptions;
+  starColor?: string;
+  class?: string;
+}
+
+const props = withDefaults(defineProps<StarsBackgroundProps>(), {
+  factor: 0.05,
+  speed: 50,
+  transition: () => ({ stiffness: 50, damping: 20 }),
+  starColor: "#fff",
+});
+
+// For slot content
+defineSlots();
+
+function generateStars(count: number, starColor: string) {
+  const shadows: string[] = [];
+  for (let i = 0; i < count; i++) {
+    const x = Math.floor(Math.random() * 4000) - 2000;
+    const y = Math.floor(Math.random() * 4000) - 2000;
+    shadows.push(`${x}px ${y}px ${starColor}`);
+  }
+  return shadows.join(", ");
+}
+
+const offsetX = useMotionValue(1);
+const offsetY = useMotionValue(1);
+
+const springX = useSpring(offsetX, props.transition);
+const springY = useSpring(offsetY, props.transition);
+
+function handleMouseMove(e: MouseEvent) {
+  const centerX = window.innerWidth / 2;
+  const centerY = window.innerHeight / 2;
+  const newOffsetX = -(e.clientX - centerX) * props.factor;
+  const newOffsetY = -(e.clientY - centerY) * props.factor;
+  offsetX.set(newOffsetX);
+  offsetY.set(newOffsetY);
+}
+
+const boxShadow1 = ref("");
+const boxShadow2 = ref("");
+const boxShadow3 = ref("");
+
+onMounted(() => {
+  boxShadow1.value = generateStars(1000, props.starColor);
+  boxShadow2.value = generateStars(400, props.starColor);
+  boxShadow3.value = generateStars(200, props.starColor);
+});
+
+// Watch for starColor changes
+watch(
+  () => props.starColor,
+  (newColor) => {
+    boxShadow1.value = generateStars(1000, newColor);
+    boxShadow2.value = generateStars(400, newColor);
+    boxShadow3.value = generateStars(200, newColor);
+  },
+);
+
+const starLayer1Transition = computed(() => ({
+  repeat: Infinity,
+  duration: props.speed,
+  ease: "linear",
+}));
+
+const starLayer2Transition = computed(() => ({
+  repeat: Infinity,
+  duration: props.speed * 2,
+  ease: "linear",
+}));
+
+const starLayer3Transition = computed(() => ({
+  repeat: Infinity,
+  duration: props.speed * 3,
+  ease: "linear",
+}));
+</script>

src/components/ui/bg-stars/index.ts

@@ -0,0 +1 @@
+export { default as StarsBackground } from "./StarsBackground.vue";

src/components/ui/particles-bg/ParticlesBg.vue

@@ -0,0 +1,250 @@
+<template>
+  <div
+    ref="canvasContainerRef"
+    :class="$props.class"
+    aria-hidden="true"
+  >
+    <canvas ref="canvasRef"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useMouse, useDevicePixelRatio } from "@vueuse/core";
+import { ref, onMounted, onBeforeUnmount, watch, computed, reactive } from "vue";
+
+type Circle = {
+  x: number;
+  y: number;
+  translateX: number;
+  translateY: number;
+  size: number;
+  alpha: number;
+  targetAlpha: number;
+  dx: number;
+  dy: number;
+  magnetism: number;
+};
+
+type Props = {
+  color?: string;
+  quantity?: number;
+  staticity?: number;
+  ease?: number;
+  class?: string;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  color: "#FFF",
+  quantity: 100,
+  staticity: 50,
+  ease: 50,
+  class: "",
+});
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const canvasContainerRef = ref<HTMLDivElement | null>(null);
+const context = ref<CanvasRenderingContext2D | null>(null);
+const circles = ref<Circle[]>([]);
+const mouse = reactive<{ x: number; y: number }>({ x: 0, y: 0 });
+const canvasSize = reactive<{ w: number; h: number }>({ w: 0, h: 0 });
+const { x: mouseX, y: mouseY } = useMouse();
+const { pixelRatio } = useDevicePixelRatio();
+
+const color = computed(() => {
+  // Remove the leading '#' if it's present
+  let hex = props.color.replace(/^#/, "");
+
+  // If the hex code is 3 characters, expand it to 6 characters
+  if (hex.length === 3) {
+    hex = hex
+      .split("")
+      .map((char) => char + char)
+      .join("");
+  }
+
+  // Parse the r, g, b values from the hex string
+  const bigint = parseInt(hex, 16);
+  const r = (bigint >> 16) & 255; // Extract the red component
+  const g = (bigint >> 8) & 255; // Extract the green component
+  const b = bigint & 255; // Extract the blue component
+
+  // Return the RGB values as a string separated by spaces
+  return `${r} ${g} ${b}`;
+});
+
+onMounted(() => {
+  if (canvasRef.value) {
+    context.value = canvasRef.value.getContext("2d");
+  }
+
+  initCanvas();
+  animate();
+  window.addEventListener("resize", initCanvas);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", initCanvas);
+});
+
+watch([mouseX, mouseY], () => {
+  onMouseMove();
+});
+
+function initCanvas() {
+  resizeCanvas();
+  drawParticles();
+}
+
+function onMouseMove() {
+  if (canvasRef.value) {
+    const rect = canvasRef.value.getBoundingClientRect();
+    const { w, h } = canvasSize;
+    const x = mouseX.value - rect.left - w / 2;
+    const y = mouseY.value - rect.top - h / 2;
+
+    const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2;
+    if (inside) {
+      mouse.x = x;
+      mouse.y = y;
+    }
+  }
+}
+
+function resizeCanvas() {
+  if (canvasContainerRef.value && canvasRef.value && context.value) {
+    circles.value.length = 0;
+    canvasSize.w = canvasContainerRef.value.offsetWidth;
+    canvasSize.h = canvasContainerRef.value.offsetHeight;
+    canvasRef.value.width = canvasSize.w * pixelRatio.value;
+    canvasRef.value.height = canvasSize.h * pixelRatio.value;
+    canvasRef.value.style.width = canvasSize.w + "px";
+    canvasRef.value.style.height = canvasSize.h + "px";
+    context.value.scale(pixelRatio.value, pixelRatio.value);
+  }
+}
+
+function circleParams(): Circle {
+  const x = Math.floor(Math.random() * canvasSize.w);
+  const y = Math.floor(Math.random() * canvasSize.h);
+  const translateX = 0;
+  const translateY = 0;
+  const size = Math.floor(Math.random() * 2) + 1;
+  const alpha = 0;
+  const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1));
+  const dx = (Math.random() - 0.5) * 0.2;
+  const dy = (Math.random() - 0.5) * 0.2;
+  const magnetism = 0.1 + Math.random() * 4;
+  return {
+    x,
+    y,
+    translateX,
+    translateY,
+    size,
+    alpha,
+    targetAlpha,
+    dx,
+    dy,
+    magnetism,
+  };
+}
+
+function drawCircle(circle: Circle, update = false) {
+  if (context.value) {
+    const { x, y, translateX, translateY, size, alpha } = circle;
+    context.value.translate(translateX, translateY);
+    context.value.beginPath();
+    context.value.arc(x, y, size, 0, 2 * Math.PI);
+    context.value.fillStyle = `rgba(${color.value.split(" ").join(", ")}, ${alpha})`;
+    context.value.fill();
+    context.value.setTransform(pixelRatio.value, 0, 0, pixelRatio.value, 0, 0);
+
+    if (!update) {
+      circles.value.push(circle);
+    }
+  }
+}
+
+function clearContext() {
+  if (context.value) {
+    context.value.clearRect(0, 0, canvasSize.w, canvasSize.h);
+  }
+}
+
+function drawParticles() {
+  clearContext();
+  const particleCount = props.quantity;
+  for (let i = 0; i < particleCount; i++) {
+    const circle = circleParams();
+    drawCircle(circle);
+  }
+}
+
+function remapValue(
+  value: number,
+  start1: number,
+  end1: number,
+  start2: number,
+  end2: number,
+): number {
+  const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2;
+  return remapped > 0 ? remapped : 0;
+}
+
+function animate() {
+  clearContext();
+  circles.value.forEach((circle, i) => {
+    // Handle the alpha value
+    const edge = [
+      circle.x + circle.translateX - circle.size, // distance from left edge
+      canvasSize.w - circle.x - circle.translateX - circle.size, // distance from right edge
+      circle.y + circle.translateY - circle.size, // distance from top edge
+      canvasSize.h - circle.y - circle.translateY - circle.size, // distance from bottom edge
+    ];
+
+    const closestEdge = edge.reduce((a, b) => Math.min(a, b));
+    const remapClosestEdge = parseFloat(remapValue(closestEdge, 0, 20, 0, 1).toFixed(2));
+
+    if (remapClosestEdge > 1) {
+      circle.alpha += 0.02;
+      if (circle.alpha > circle.targetAlpha) circle.alpha = circle.targetAlpha;
+    } else {
+      circle.alpha = circle.targetAlpha * remapClosestEdge;
+    }
+
+    circle.x += circle.dx;
+    circle.y += circle.dy;
+    circle.translateX +=
+      (mouse.x / (props.staticity / circle.magnetism) - circle.translateX) / props.ease;
+    circle.translateY +=
+      (mouse.y / (props.staticity / circle.magnetism) - circle.translateY) / props.ease;
+
+    // circle gets out of the canvas
+    if (
+      circle.x < -circle.size ||
+      circle.x > canvasSize.w + circle.size ||
+      circle.y < -circle.size ||
+      circle.y > canvasSize.h + circle.size
+    ) {
+      // remove the circle from the array
+      circles.value.splice(i, 1);
+      // create a new circle
+      const newCircle = circleParams();
+      drawCircle(newCircle);
+      // update the circle position
+    } else {
+      drawCircle(
+        {
+          ...circle,
+          x: circle.x,
+          y: circle.y,
+          translateX: circle.translateX,
+          translateY: circle.translateY,
+          alpha: circle.alpha,
+        },
+        true,
+      );
+    }
+  });
+  window.requestAnimationFrame(animate);
+}
+</script>

src/components/ui/particles-bg/index.ts

@@ -0,0 +1 @@
+export { default as ParticlesBg } from "./ParticlesBg.vue";