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

public/js/effects/snow.js

@@ -0,0 +1,107 @@
+/**
+ * 文件功能：聊天室下雪特效
+ *
+ * 使用 Canvas 绘制随机飘落的雪花圆点，模拟冬日飘雪效果。
+ * 雪花大小、速度、飘动幅度随机，在浅色背景上以白色+深描边显示。
+ * 特效总时长约 10 秒，结束后自动清理并回调。
+ */
+
+const SnowEffect = (() => {
+    // 雪花类
+    class Flake {
+        constructor(w, h) {
+            this.w = w;
+            this.h = h;
+            this.reset(true);
+        }
+
+        /**
+         * 重置雪花位置
+         *
+         * @param  {boolean}  initial  是否初始化（初始化时 Y 随机分布全屏，否则从顶部重生）
+         */
+        reset(initial = false) {
+            this.x = Math.random() * this.w;
+            this.y = initial ? Math.random() * this.h : -10;
+            this.r = Math.random() * 4 + 2; // 半径 2-6
+            this.speed = Math.random() * 1.5 + 0.5; // 下落速度
+            this.drift = Math.random() * 0.8 - 0.4; // 水平漂移
+            this.alpha = Math.random() * 0.4 + 0.6; // 透明度 0.6-1.0
+            this.angle = 0;
+            this.wobble = Math.random() * 0.04 + 0.01; // 左右摇摆频率
+        }
+
+        /** 每帧更新雪花位置 */
+        update() {
+            this.angle += this.wobble;
+            this.x += Math.sin(this.angle) * this.drift + this.drift * 0.3;
+            this.y += this.speed;
+            if (this.y > this.h + 10) {
+                this.reset(false);
+            }
+        }
+
+        /** 绘制雪花（白色圆点 + 深色描边，在浅色背景上可见） */
+        draw(ctx) {
+            ctx.save();
+            ctx.globalAlpha = this.alpha;
+            // 外圈：半透明蓝灰描边
+            ctx.beginPath();
+            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
+            ctx.strokeStyle = "rgba(80, 120, 180, 0.6)";
+            ctx.lineWidth = 0.8;
+            ctx.stroke();
+            // 内部：白色填充
+            ctx.fillStyle = "#ffffff";
+            ctx.shadowColor = "rgba(150, 180, 255, 0.8)";
+            ctx.shadowBlur = 4;
+            ctx.fill();
+            ctx.restore();
+        }
+    }
+
+    /**
+     * 启动下雪特效
+     *
+     * @param  {HTMLCanvasElement}  canvas   全屏 Canvas
+     * @param  {Function}           onEnd    特效结束回调
+     */
+    function start(canvas, onEnd) {
+        const ctx = canvas.getContext("2d");
+        const w = canvas.width;
+        const h = canvas.height;
+        const DURATION = 10000; // 总时长（ms）
+        const FLAKE_COUNT = 160; // 雪花数量
+
+        // 初始化雪花，随机分布全屏（避免开始时全堆在顶部）
+        const flakes = Array.from(
+            { length: FLAKE_COUNT },
+            () => new Flake(w, h),
+        );
+
+        let animId = null;
+        const startTime = performance.now();
+
+        function animate(now) {
+            // 清除画布（透明，不遮挡聊天背景）
+            ctx.clearRect(0, 0, w, h);
+
+            flakes.forEach((f) => {
+                f.update();
+                f.draw(ctx);
+            });
+
+            if (now - startTime < DURATION) {
+                animId = requestAnimationFrame(animate);
+            } else {
+                cancelAnimationFrame(animId);
+                ctx.clearRect(0, 0, w, h);
+                onEnd();
+            }
+        }
+
+        animId = requestAnimationFrame(animate);
+    }
+
+    return { start };
+})();