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";