echoes/frontend/hooks/Background.tsx

import { useEffect, useRef, memo } from "react";
import { useThemeMode } from "hooks/ThemeMode";

interface AnimatedBackgroundProps {
  onError?: () => void;
}

export const AnimatedBackground = memo(
  ({ onError }: AnimatedBackgroundProps) => {
    const canvasRef = useRef<HTMLCanvasElement>(null);
    const { mode } = useThemeMode();

    useEffect(() => {
      const canvas = canvasRef.current;
      if (!canvas) {
        onError?.();
        return;
      }

      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      try {
        const ctx = canvas.getContext("2d", {
          alpha: true,
          desynchronized: true,
        });

        if (!ctx) {
          console.error("无法获取 canvas context");
          onError?.();
          return;
        }

        const context = ctx;

        const getRandomHSLColor = () => {
          const hue = Math.random() * 360;
          const saturation = 90 + Math.random() * 10;
          const lightness =
            mode === "dark"
              ? 50 + Math.random() * 15 // 暗色模式：50-65%
              : 60 + Math.random() * 15; // 亮色模式：60-75%
          return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
        };

        const ballColor = getRandomHSLColor();
        let ballRadius = 100;
        let x = canvas.width / 2;
        let y = canvas.height - 200;
        let dx = 0.2;
        let dy = -0.2;

        function drawBall() {
          context.beginPath();
          context.arc(x, y, ballRadius, 0, Math.PI * 2);
          context.fillStyle = ballColor;
          context.fill();
          context.closePath();
        }

        const fps = 30;
        const interval = 1000 / fps;
        let then = Date.now();

        const draw = () => {
          const now = Date.now();
          const delta = now - then;

          if (delta > interval) {
            then = now - (delta % interval);

            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBall();

            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
              dx = -dx;
            }
            if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
              dy = -dy;
            }

            x += dx;
            y += dy;
          }

          animationFrameId = requestAnimationFrame(draw);
        };

        let animationFrameId: number;
        draw();

        return () => {
          if (animationFrameId) {
            cancelAnimationFrame(animationFrameId);
          }
        };
      } catch (error) {
        console.error("Canvas 初始化失败:", error);
        onError?.();
        return;
      }
    }, [mode, onError]);

    return (
      <div className="fixed inset-0 -z-10 overflow-hidden">
        <canvas
          ref={canvasRef}
          className="w-full h-full opacity-70"
          style={{
            filter: "blur(100px)",
            position: "absolute",
            top: 0,
            left: 0,
            willChange: "transform",
          }}
        />
      </div>
    );
  },
);