Feat: 新增下雪特效，加强烟花/下雨在浅色背景的显色（发光粒子+深色雨线）

public/js/effects/rain.js

@@ -2,6 +2,7 @@
  * 文件功能：聊天室下雨特效
  *
  * 使用 Canvas 绘制斜向雨线，模拟真实降雨视觉效果。
+ * 加粗加深雨线颜色，在浅色背景上清晰可见。
  * 特效总时长约 8 秒，结束后自动清理并回调。
  */
 
@@ -14,17 +15,15 @@ const RainEffect = (() => {
 
         /**
          * 重置/初始化雨滴位置
-         *
-         * @param  {number}  w  Canvas 宽度
-         * @param  {number}  h  Canvas 高度
          */
         reset(w, h) {
             this.x = Math.random() * w;
-            this.y = Math.random() * -h; // 从屏幕上方随机位置开始
-            this.len = Math.random() * 20 + 10; // 雨线长度
-            this.speed = Math.random() * 8 + 6; // 下落速度
-            this.angle = (Math.PI / 180) * (75 + Math.random() * 10); // 倾斜角（接近竖直偏右）
-            this.alpha = Math.random() * 0.3 + 0.2; // 透明度
+            this.y = Math.random() * -h;
+            this.len = Math.random() * 25 + 12; // 雨线长度（稍加长）
+            this.speed = Math.random() * 10 + 7; // 下落速度（加快）
+            this.angle = (Math.PI / 180) * (75 + Math.random() * 10);
+            this.alpha = Math.random() * 0.5 + 0.4; // 提高透明度上限 (0.4-0.9，原 0.2-0.5)
+            this.strokeW = Math.random() * 1.5 + 0.8; // 线条宽度随机（原 0.8 固定）
             this.w = w;
             this.h = h;
         }
@@ -33,17 +32,18 @@ const RainEffect = (() => {
         update() {
             this.x += Math.cos(this.angle) * this.speed * 0.3;
             this.y += Math.sin(this.angle) * this.speed;
-            // 落出屏幕后重置
             if (this.y > this.h + this.len) {
                 this.reset(this.w, this.h);
             }
         }
 
-        /** 绘制雨滴线段 */
+        /** 绘制雨滴线段（加深蓝色，在浅色背景上更明显） */
         draw(ctx) {
             ctx.save();
-            ctx.strokeStyle = `rgba(155, 200, 255, ${this.alpha})`;
-            ctx.lineWidth = 0.8;
+            ctx.strokeStyle = `rgba(50, 130, 220, ${this.alpha})`; // 加深蓝色（原浅蓝 155,200,255）
+            ctx.lineWidth = this.strokeW;
+            ctx.shadowColor = "rgba(30, 100, 200, 0.4)";
+            ctx.shadowBlur = 2;
             ctx.beginPath();
             ctx.moveTo(this.x, this.y);
             ctx.lineTo(
@@ -65,13 +65,12 @@ const RainEffect = (() => {
         const ctx = canvas.getContext("2d");
         const w = canvas.width;
         const h = canvas.height;
-        const DURATION = 8000; // 总时长（ms）
-        const DROP_COUNT = 180; // 雨滴数量
+        const DURATION = 8000;
+        const DROP_COUNT = 200; // 增加雨滴数量（原 180）
 
-        // 初始化所有雨滴，随机分布在屏幕各处（避免开始时从顶部一起落）
         const drops = Array.from({ length: DROP_COUNT }, () => {
             const d = new Drop(w, h);
-            d.y = Math.random() * h; // 初始 Y 随机，不全部从顶部开始
+            d.y = Math.random() * h;
             return d;
         });
 
@@ -79,7 +78,7 @@ const RainEffect = (() => {
         const startTime = performance.now();
 
         function animate(now) {
-            // 清除画布（保持透明，不遮挡聊天背景）
+            // 清除画布（透明，不遮挡聊天背景）
             ctx.clearRect(0, 0, w, h);
 
             drops.forEach((d) => {