feat(StarryBackground): 优化流星效果并调整默认参数

- 增加流星边界检测和重置逻辑
- 使用线性渐变实现流星拖尾淡出效果
- 调整流星生成位置使其从右侧出现
- 修改默认速度、长度等参数值

@@ -31,22 +31,22 @@ const props = defineProps({
   // 星星移动速度系数 (值越大移动越快)
   // 星星移动速度系数 (值越大移动越快)
   starSpeed: {
   starSpeed: {
     type: Number,
     type: Number,
-    default: 0.15
+    default: 1
   },
   },
   // 流星速度 - 水平分量 (负值向左，正值向右)
   // 流星速度 - 水平分量 (负值向左，正值向右)
   meteorVx: {
   meteorVx: {
     type: Number,
     type: Number,
-    default: -2
+    default: -5
   },
   },
   // 流星速度 - 垂直分量 (正值向下)
   // 流星速度 - 垂直分量 (正值向下)
   meteorVy: {
   meteorVy: {
     type: Number,
     type: Number,
-    default: 4
+    default: 5
   },
   },
   // 流星拖尾长度系数 (值越大尾巴越长)
   // 流星拖尾长度系数 (值越大尾巴越长)
   meteorTrail: {
   meteorTrail: {
     type: Number,
     type: Number,
-    default: 20
+    default: 5
   }
   }
 });
 });
 
 
@@ -101,16 +101,33 @@ const render = () => {
 
 
     // 流星逻辑
     // 流星逻辑
     if (i === meteorIndex) {
     if (i === meteorIndex) {
+      // 检查流星是否超出边界，如果是则重置
+      if (star.x < -100 || star.y > height + 100) {
+        meteorIndex = -1; // 结束当前流星
+      } else {
         star.vx = props.meteorVx;
         star.vx = props.meteorVx;
         star.vy = props.meteorVy;
         star.vy = props.meteorVy;
         context.beginPath();
         context.beginPath();
-      context.strokeStyle = `rgba(${props.starColor}, ${star.alpha})`;
-      context.lineWidth = star.r;
-      context.moveTo(star.x, star.y);
-      context.lineTo(star.x + star.vx * props.meteorTrail, star.y + star.vy * props.meteorTrail);
+
+        // 创建线性渐变来实现淡入淡出和拖尾效果
+        const meteorHeadX = star.x + star.vx;
+        const meteorHeadY = star.y + star.vy;
+        const meteorTailX = star.x + star.vx * props.meteorTrail;
+        const meteorTailY = star.y + star.vy * props.meteorTrail;
+
+        const gradient = context.createLinearGradient(meteorHeadX, meteorHeadY, meteorTailX, meteorTailY);
+        gradient.addColorStop(0, `rgba(${props.starColor}, 1)`); // 头部最亮
+        gradient.addColorStop(0.4, `rgba(${props.starColor}, 0.5)`); // 中间半透明
+        gradient.addColorStop(1, `rgba(${props.starColor}, 0)`); // 尾部完全透明
+
+        context.strokeStyle = gradient;
+        context.lineWidth = 1; // 细一点
+        context.moveTo(meteorHeadX, meteorHeadY);
+        context.lineTo(meteorTailX, meteorTailY);
         context.stroke();
         context.stroke();
         context.closePath();
         context.closePath();
       }
       }
+    }
 
 
     // 星星闪烁与移动逻辑
     // 星星闪烁与移动逻辑
     star.alpha += star.ra;
     star.alpha += star.ra;
@@ -161,7 +178,16 @@ const render = () => {
 const triggerMeteor = () => {
 const triggerMeteor = () => {
   const time = Math.round(Math.random() * 3000 + 33);
   const time = Math.round(Math.random() * 3000 + 33);
   meteorTimeoutId = setTimeout(() => {
   meteorTimeoutId = setTimeout(() => {
+    // 随机选择一个星星作为流星的起点，或者随机生成一个位置
+    // 为了保证流星从右往左出现，我们从右侧区域随机选点
     meteorIndex = Math.ceil(Math.random() * stars.length);
     meteorIndex = Math.ceil(Math.random() * stars.length);
+
+    // 如果选中了星星，重置它的位置到右上方，以便从右往左飞
+    if (stars[meteorIndex]) {
+        stars[meteorIndex].x = width + Math.random() * 200; // 屏幕右侧外
+        stars[meteorIndex].y = Math.random() * height * 0.5; // 屏幕上半部分
+    }
+
     triggerMeteor();
     triggerMeteor();
   }, time);
   }, time);
 };
 };