refactor: remove mouse parallax effect from starry background

Author: thinkingjimmy

src/components/StarryBackground.jsx

@@ -1,12 +1,10 @@
 'use client';
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 
 const StarryBackground = ({ starCount = 240 }) => {
   const [stars, setStars] = useState([]);
-  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
   const [isMobile, setIsMobile] = useState(false);
-  const containerRef = useRef(null);
 
   // 检测是否为移动端
   useEffect(() => {
@@ -41,44 +39,6 @@ const StarryBackground = ({ starCount = 240 }) => {
     generateStars();
   }, [starCount, isMobile]); // 添加isMobile作为依赖项
 
-  // 监听鼠标移动
-  useEffect(() => {
-    const handleMouseMove = (e) => {
-      if (containerRef.current) {
-        const rect = containerRef.current.getBoundingClientRect();
-        const centerX = rect.width / 2;
-        const centerY = rect.height / 2;
-        
-        // 计算鼠标相对于容器中心的位置
-        const x = (e.clientX - rect.left - centerX) / centerX;
-        const y = (e.clientY - rect.top - centerY) / centerY;
-        
-        setMousePosition({ x, y });
-      }
-    };
-
-    window.addEventListener('mousemove', handleMouseMove);
-    return () => window.removeEventListener('mousemove', handleMouseMove);
-  }, []);
-
-
-  // 计算星星的位移
-  const getStarTransform = (star) => {
-    // 不同层级的鼠标位移系数（与鼠标移动方向相反）
-    const mouseLayerMultipliers = {
-      1: 1,   // 最上层，位移最小
-      2: 2,   // 中间层
-      3: 4,   // 最下层，位移最大
-    };
-    
-    const mouseMultiplier = mouseLayerMultipliers[star.layer];
-    
-    const offsetX = -mousePosition.x * mouseMultiplier;
-    const offsetY = -mousePosition.y * mouseMultiplier;
-    
-    return `translate(${offsetX}px, ${offsetY}px)`;
-  };
-
   // 根据层级获取星星的透明度和大小
   const getStarStyle = (star) => {
     const layerStyles = {
@@ -93,14 +53,14 @@ const StarryBackground = ({ starCount = 240 }) => {
       opacity: style.opacity,
       width: style.size,
       height: style.size,
-      transform: getStarTransform(star),
-      transition: 'transform 0.1s ease-out',
+      // 保持静止：不使用 transform/transition
+      transform: 'none',
+      transition: 'none',
     };
   };
 
   return (
     <div 
-      ref={containerRef}
       className="absolute top-0 left-0 w-full h-full z-0 overflow-hidden bg-[#191E1B]"
     >
       {stars.map((star) => (