echoes/frontend/hooks/ParticleImage.tsx

import { useEffect, useRef, useState, useCallback } from "react";
import * as THREE from "three";
import { gsap } from "gsap";
import throttle from "lodash/throttle";

interface Particle {
  x: number;
  y: number;
  z: number;
  originalX: number;
  originalY: number;
  originalColor: THREE.Color;
  delay: number;
}

const particleLoadQueue = new Set<string>();
let lastAnimationTime = 0;
const ANIMATION_THRESHOLD = 300; // 300ms的阈值
const MIN_DELAY = 100; // 最小延迟时间

const createErrorParticles = (width: number, height: number) => {
  const particles: Particle[] = [];
  const positionArray: number[] = [];
  const colorArray: number[] = [];

  const errorColor = new THREE.Color(0.8, 0, 0);
  const size = Math.min(width, height);
  const scaleFactor = size * 0.35;
  const particlesPerLine = 50;

  // X 形状的两条线
  const lines = [
    // 左上到右下的线
    { start: [-1, 1], end: [1, -1] },
    // 右上到左下的线
    { start: [1, 1], end: [-1, -1] },
  ];

  lines.forEach((line) => {
    for (let i = 0; i < particlesPerLine; i++) {
      const t = i / (particlesPerLine - 1);
      const x = line.start[0] + (line.end[0] - line.start[0]) * t;
      const y = line.start[1] + (line.end[1] - line.start[1]) * t;

      // 添加一些随机偏移
      const randomOffset = 0.1;
      const randomX = x + (Math.random() - 0.5) * randomOffset;
      const randomY = y + (Math.random() - 0.5) * randomOffset;

      const scaledX = randomX * scaleFactor;
      const scaledY = randomY * scaleFactor;

      particles.push({
        x: scaledX,
        y: scaledY,
        z: 0,
        originalX: scaledX,
        originalY: scaledY,
        originalColor: errorColor,
        delay: 0,
      });

      // 修改初始位置生成方式
      const angle = Math.random() * Math.PI * 2;
      const distance = size * 2;
      positionArray.push(
        Math.cos(angle) * distance,
        Math.sin(angle) * distance,
        0,
      );

      // 初始颜色设置为最终颜色的一半亮度
      colorArray.push(
        errorColor.r * 0.5,
        errorColor.g * 0.5,
        errorColor.b * 0.5,
      );
    }
  });

  const particleSize = Math.max(1.2, (size / 200) * 1.2);

  return { particles, positionArray, colorArray, particleSize };
};

// 修改 createSmileParticles 函数
const createSmileParticles = (width: number, height: number) => {
  const particles: Particle[] = [];
  const positionArray: number[] = [];
  const colorArray: number[] = [];

  const size = Math.min(width, height);
  const scale = size / 200;
  const radius = size * 0.4;
  const particleSize = Math.max(1.2, scale * 1.2);
  const particleColor = new THREE.Color(0.8, 0.6, 0);

  // 预先计算所有需要的粒子位置
  const allPoints: { x: number; y: number }[] = [];

  // 计算脸部轮廓的点
  const outlinePoints = Math.floor(60 * scale);
  const offsetX = radius * 0.05; // 添加水平偏移
  const offsetY = radius * 0.05; // 添加垂直偏移

  for (let i = 0; i < outlinePoints; i++) {
    const angle = (i / outlinePoints) * Math.PI * 2;
    allPoints.push({
      x: Math.cos(angle) * radius + offsetX,
      y: Math.sin(angle) * radius + offsetY,
    });
  }

  // 改眼睛的生成方式
  const eyeOffset = radius * 0.3;
  const eyeY = radius * 0.15 + offsetY;
  const eyeSize = radius * 0.1; // 稍微减小眼睛尺寸
  const eyePoints = Math.floor(20 * scale);

  [-1, 1].forEach((side) => {
    // 使用同心圆的方式生成眼睛
    const eyeCenterX = side * eyeOffset + offsetX;
    const rings = 3; // 同心圆的数量

    for (let ring = 0; ring < rings; ring++) {
      const ringRadius = eyeSize * (1 - ring / rings); // 从外到内递减半径
      const pointsInRing = Math.floor(eyePoints / rings);

      for (let i = 0; i < pointsInRing; i++) {
        const angle = (i / pointsInRing) * Math.PI * 2;
        allPoints.push({
          x: eyeCenterX + Math.cos(angle) * ringRadius,
          y: eyeY + Math.sin(angle) * ringRadius,
        });
      }
    }

    // 添加中心点
    allPoints.push({
      x: eyeCenterX,
      y: eyeY,
    });
  });

  // 计算嘴巴的点
  const smileWidth = radius * 0.6;
  const smileY = -radius * 0.35 + offsetY;
  const smilePoints = Math.floor(25 * scale);

  for (let i = 0; i < smilePoints; i++) {
    const t = i / (smilePoints - 1);
    const x = (t * 2 - 1) * smileWidth + offsetX;
    const y = smileY + Math.pow(x / smileWidth, 2) * radius * 0.2 + offsetY;
    allPoints.push({ x, y });
  }

  // 为所有点创建粒子
  allPoints.forEach((point) => {
    particles.push({
      x: point.x,
      y: point.y,
      z: 0,
      originalX: point.x,
      originalY: point.y,
      originalColor: particleColor,
      delay: 0,
    });

    // 生成初始位置（从外围圆形区域开始）
    const initAngle = Math.random() * Math.PI * 2;
    const distance = size * 2;
    positionArray.push(
      Math.cos(initAngle) * distance,
      Math.sin(initAngle) * distance,
      0,
    );

    // 初始颜色设置为最终颜色的一半亮度
    colorArray.push(
      particleColor.r * 0.5,
      particleColor.g * 0.5,
      particleColor.b * 0.5,
    );
  });

  return { particles, positionArray, colorArray, particleSize };
};

// 在文件开头添加新的 helper 函数
const easeOutCubic = (t: number) => {
  return 1 - Math.pow(1 - t, 3);
};

const customEase = (t: number) => {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
};

// 在文件开头添加新的 LoaderStatus 接口
interface LoaderStatus {
  isLoading: boolean;
  hasError: boolean;
  timeoutError: boolean;
}

// 修改 ParticleImage 组件的 props 接口
interface ParticleImageProps {
  src?: string;
  status?: LoaderStatus;
  onLoad?: () => void;
  onAnimationComplete?: () => void;
}

// 修改 BG_CONFIG，添加尺寸配置
const BG_CONFIG = {
  className:
    "bg-gradient-to-br from-[rgb(248,250,252)] via-[rgb(241,245,249)] to-[rgb(236,241,247)] dark:from-[rgb(10,37,77)] dark:via-[rgb(8,27,57)] dark:to-[rgb(2,8,23)]",
};

// 修改采样率和粒子大小计算函数
const getOptimalImageParams = (width: number, height: number) => {
  const totalPixels = width * height;
  const pixelRatio = window.devicePixelRatio || 1;
  const isMobile = window.innerWidth <= 768;

  // 移动端使用更大的采样间隔来减少数量
  let samplingGap = isMobile
    ? Math.ceil(Math.max(width, height) / 60) // 移动端降低采样密度
    : Math.ceil(Math.max(width, height) / 120); // 桌面端保持较高采密度

  // 限制最小采样间隔，避免粒子过多
  samplingGap = Math.max(samplingGap, isMobile ? 4 : 2);

  // 计算粒子大小
  const size = Math.min(width, height);
  const scale = size / 200;
  // 移动端适当增大粒子以保持视觉效果
  const particleSize = isMobile
    ? Math.max(2, scale * 2.2)
    : Math.max(1.5, scale * (1.8 / pixelRatio));

  return {
    samplingGap,
    particleSize,
    // 移动端使用较短的动画时间减少性能开销
    animationDuration: isMobile ? 0.6 : 0.8,
    // 移动端减少延迟时间，使动画更快完成
    delayMultiplier: isMobile ? 0.3 : 0.6,
  };
};

// 添加资源清理函数
const cleanupResources = (scene: THREE.Scene) => {
  scene.traverse((object) => {
    if (object instanceof THREE.Points) {
      const geometry = object.geometry;
      const material = object.material as THREE.PointsMaterial;

      // 清空几何体缓冲区
      if (geometry.attributes.position) {
        geometry.attributes.position.array = new Float32Array(0);
      }
      if (geometry.attributes.color) {
        geometry.attributes.color.array = new Float32Array(0);
      }

      geometry.dispose();
      material.dispose();

      // 移除所有属性
      geometry.deleteAttribute("position");
      geometry.deleteAttribute("color");
    }
  });
  scene.clear();
};

export const ParticleImage = ({
  src,
  status,
  onLoad,
  onAnimationComplete,
}: ParticleImageProps) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const sceneRef = useRef<THREE.Scene>();
  const cameraRef = useRef<THREE.OrthographicCamera>();
  const rendererRef = useRef<THREE.WebGLRenderer>();
  const animationFrameRef = useRef<number>();
  const animationTimeoutRef = useRef<NodeJS.Timeout>();
  const isAnimatingRef = useRef(false); // 添加动画状态控制

  // 添加一个 ref 来追踪组件的挂载状态
  const isMountedRef = useRef(true);

  // 修改动画控制函数
  const startAnimation = useCallback(
    (
      positionAttribute: THREE.BufferAttribute,
      particles: Particle[],
      width: number,
      height: number,
    ) => {
      if (isAnimatingRef.current) return;
      isAnimatingRef.current = true;

      const { animationDuration, delayMultiplier } = getOptimalImageParams(
        width,
        height,
      );
      const animations: gsap.core.Tween[] = [];

      // 获取当前场景中的 Points 对象
      const points = sceneRef.current?.children[0] as THREE.Points;
      if (!points) return;

      const material = points.material as THREE.PointsMaterial;

      // 添加材质透明度动画
      const materialTween = gsap.to(material, {
        opacity: 1,
        duration: 0.3,
        ease: "power2.out",
      });
      animations.push(materialTween);

      particles.forEach((particle, i) => {
        const i3 = i * 3;
        const distanceToCenter = Math.sqrt(
          Math.pow(particle.originalX, 2) + Math.pow(particle.originalY, 2),
        );
        const maxDistance = Math.sqrt(
          Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
        );
        const normalizedDistance = distanceToCenter / maxDistance;

        const tween = gsap.to(positionAttribute.array, {
          duration: animationDuration,
          delay: normalizedDistance * delayMultiplier,
          [i3]: particle.originalX,
          [i3 + 1]: particle.originalY,
          [i3 + 2]: 0,
          ease: "power2.inOut",
          onUpdate: () => {
            positionAttribute.needsUpdate = true;
          },
        });
        animations.push(tween);
      });

      if (animationTimeoutRef.current) {
        clearTimeout(animationTimeoutRef.current);
      }

      const maxDelay = Math.max(
        ...animations.map((tween) => tween.delay() || 0),
      );

      // 在动画即将结束时开始淡出粒子
      const fadeOutDelay = (maxDelay + animationDuration) * 1000 - 200;

      setTimeout(() => {
        gsap.to(material, {
          opacity: 0,
          duration: 0.3,
          ease: "power2.in",
        });
      }, fadeOutDelay);

      // 确保在粒子完全消失后才触发完成回调
      animationTimeoutRef.current = setTimeout(() => {
        requestAnimationFrame(() => {
          isAnimatingRef.current = false;
          if (onAnimationComplete) {
            onAnimationComplete();
          }
        });
      }, fadeOutDelay + 300);
    },
    [onAnimationComplete],
  );

  // 修改清理函数
  const cleanup = useCallback(() => {
    if (!isMountedRef.current) return;

    // 检查是否应该跳过清理
    if (
      sceneRef.current?.userData.isSmileComplete ||
      sceneRef.current?.userData.isErrorComplete
    ) {
      return;
    }

    // 清理动画状态
    isAnimatingRef.current = false;

    // 清理超时
    if (animationTimeoutRef.current) {
      clearTimeout(animationTimeoutRef.current);
    }

    // 取消动画帧
    if (animationFrameRef.current) {
      cancelAnimationFrame(animationFrameRef.current);
      animationFrameRef.current = undefined;
    }

    // 清理 GSAP 动画
    gsap.killTweensOf("*");

    // 清理场景资源
    if (sceneRef.current) {
      // 检查是否应该跳过清理
      if (
        !sceneRef.current.userData.isSmileComplete &&
        !sceneRef.current.userData.isErrorComplete
      ) {
        cleanupResources(sceneRef.current);
      }
    }

    // 修改渲染器清理逻辑
    if (
      rendererRef.current &&
      !sceneRef.current?.userData.isSmileComplete &&
      !sceneRef.current?.userData.isErrorComplete
    ) {
      const renderer = rendererRef.current;

      // 确保在移除 DOM 元素前停止渲染
      renderer.setAnimationLoop(null);

      // 清理渲染器上下文
      renderer.dispose();
      renderer.forceContextLoss();

      // 安全地移除 DOM 元素
      const domElement = renderer.domElement;
      if (containerRef.current?.contains(domElement)) {
        requestAnimationFrame(() => {
          if (
            isMountedRef.current &&
            containerRef.current?.contains(domElement)
          ) {
            try {
              containerRef.current.removeChild(domElement);
            } catch (e) {
              console.warn("清理渲染器DOM元素失败:", e);
            }
          }
        });
      }

      // 清空引用
      rendererRef.current = undefined;
    }

    // 清理相机引用
    if (
      cameraRef.current &&
      !sceneRef.current?.userData.isSmileComplete &&
      !sceneRef.current?.userData.isErrorComplete
    ) {
      cameraRef.current = undefined;
    }
  }, []);

  // 修改 useEffect 的清理
  useEffect(() => {
    return () => {
      cleanup();
    };
  }, [cleanup]);

  // 修改 updateParticles 函数
  const updateParticles = useCallback(
    (width: number, height: number, instanceId: string) => {
      if (!sceneRef.current || isAnimatingRef.current || !isMountedRef.current)
        return;

      // 只有当src不为空时才执行cleanup
      if (src !== "") {
        cleanup();
      }

      if (!isMountedRef.current) return;

      const { particles, positionArray, colorArray, particleSize } =
        createSmileParticles(width, height);

      const geometry = new THREE.BufferGeometry();
      const material = new THREE.PointsMaterial({
        size: particleSize,
        vertexColors: true,
        transparent: true,
        opacity: 1,
        sizeAttenuation: true,
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        depthTest: false,
      });

      geometry.setAttribute(
        "position",
        new THREE.Float32BufferAttribute(positionArray, 3),
      );
      geometry.setAttribute(
        "color",
        new THREE.Float32BufferAttribute(colorArray, 3),
      );

      const points = new THREE.Points(geometry, material);
      sceneRef.current.add(points);

      const positionAttribute = geometry.attributes
        .position as THREE.BufferAttribute;

      // 记录完成的动画数量
      let completedAnimations = 0;
      const totalAnimations = particles.length;

      particles.forEach((particle, i) => {
        const i3 = i * 3;
        const distanceToCenter = Math.sqrt(
          Math.pow(particle.originalX, 2) + Math.pow(particle.originalY, 2),
        );
        const maxDistance = Math.sqrt(
          Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
        );
        const normalizedDistance = distanceToCenter / maxDistance;

        gsap.to(positionAttribute.array, {
          duration: 0.8,
          delay: normalizedDistance * 0.6,
          [i3]: particle.originalX,
          [i3 + 1]: particle.originalY,
          [i3 + 2]: 0,
          ease: "sine.inOut",
          onUpdate: () => {
            positionAttribute.needsUpdate = true;
          },
          onComplete: () => {
            completedAnimations++;
            if (completedAnimations === totalAnimations && sceneRef.current) {
              sceneRef.current.userData.isSmileComplete = true;
              loadingQueue.remove("", instanceId);
            }
          },
        });
      });
    },
    [cleanup, src],
  );

  // 将 handleResize 移到 ParticleImage 组件内部
  const handleResize = useCallback(() => {
    if (
      !containerRef.current ||
      !cameraRef.current ||
      !rendererRef.current ||
      !sceneRef.current ||
      !isMountedRef.current
    )
      return;

    const width = containerRef.current.offsetWidth;
    const height = containerRef.current.offsetHeight;

    // 更新相机图
    const camera = cameraRef.current;
    camera.left = width / -2;
    camera.right = width / 2;
    camera.top = height / 2;
    camera.bottom = height / -2;
    camera.updateProjectionMatrix();

    // 更新渲染器大小
    rendererRef.current.setSize(width, height);

    // 只在尺寸显著变化时重新生成粒子
    const currentSize = Math.min(width, height);
    const previousSize = sceneRef.current.userData.previousSize || currentSize;
    const sizeChange = Math.abs(currentSize - previousSize) / previousSize;

    if (sizeChange > 0.2 && src === "") {
      if (sceneRef.current) {
        cleanupResources(sceneRef.current);
      }
      sceneRef.current.userData.previousSize = currentSize;
      updateParticles(width, height, ""); // 传入空字符串作为 instanceId
    }
  }, [src, updateParticles]);

  // 主要的 useEffect
  useEffect(() => {
    isMountedRef.current = true;

    if (!containerRef.current) return;

    const width = containerRef.current.offsetWidth;
    const height = containerRef.current.offsetHeight;

    const scene = new THREE.Scene();
    sceneRef.current = scene;

    const camera = new THREE.OrthographicCamera(
      width / -2,
      width / 2,
      height / 2,
      height / -2,
      1,
      1000,
    );
    camera.position.z = 500;
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    cameraRef.current = camera;

    const renderer = new THREE.WebGLRenderer({
      alpha: true,
      antialias: window.innerWidth > 768,
      powerPreference: "low-power",
      failIfMajorPerformanceCaveat: false,
      canvas: document.createElement("canvas"),
    });

    // 在初始化渲染后立即添加错误检查
    if (!renderer.capabilities.isWebGL2) {
      console.warn("WebGL2 not supported, falling back...");
      renderer.dispose();
      renderer.forceContextLoss();
      return;
    }

    renderer.setPixelRatio(
      Math.min(window.devicePixelRatio, window.innerWidth <= 768 ? 2 : 3),
    );
    renderer.setSize(width, height);
    rendererRef.current = renderer;

    // 修改渲染器添加到DOM的部分
    if (containerRef.current && isMountedRef.current && renderer.domElement) {
      try {
        containerRef.current.appendChild(renderer.domElement);
      } catch (e) {
        console.warn("Failed to append renderer:", e);
        return;
      }
    }

    // 检查是否应该显示笑脸
    if (src === "") {
      const { particles, positionArray, colorArray, particleSize } =
        createSmileParticles(width, height);

      const material = new THREE.PointsMaterial({
        size: particleSize,
        vertexColors: true,
        transparent: true,
        opacity: 1,
        sizeAttenuation: true,
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        depthTest: false,
      });

      const geometry = new THREE.BufferGeometry();
      geometry.setAttribute(
        "position",
        new THREE.Float32BufferAttribute(positionArray, 3),
      );
      geometry.setAttribute(
        "color",
        new THREE.Float32BufferAttribute(colorArray, 3),
      );

      const points = new THREE.Points(geometry, material);
      scene.add(points);

      // 添加这一行来获取position属性
      const positionAttribute = geometry.attributes
        .position as THREE.BufferAttribute;

      // 修改动画效果,添加完成回调
      particles.forEach((particle, i) => {
        const i3 = i * 3;
        const distanceToCenter = Math.sqrt(
          Math.pow(particle.originalX, 2) + Math.pow(particle.originalY, 2),
        );
        const maxDistance = Math.sqrt(
          Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
        );
        const normalizedDistance = distanceToCenter / maxDistance;

        gsap.to(positionAttribute.array, {
          duration: 0.8,
          delay: normalizedDistance * 0.6,
          [i3]: particle.originalX,
          [i3 + 1]: particle.originalY,
          [i3 + 2]: 0,
          ease: "sine.inOut",
          onUpdate: () => {
            positionAttribute.needsUpdate = true;
          },
          onComplete: () => {
            // 动画完成后设置标记,防止被清理
            if (scene) {
              scene.userData.isSmileComplete = true;
            }
          },
        });
      });

      // 启动动画循环
      const animate = () => {
        if (renderer && scene && camera) {
          renderer.render(scene, camera);
        }
        animationFrameRef.current = requestAnimationFrame(animate);
      };
      animate();

      // 设置 resize 监听
      const throttledResize = throttle(handleResize, 200, {
        leading: true,
        trailing: true,
      });

      const resizeObserver = new ResizeObserver(throttledResize);
      resizeObserver.observe(containerRef.current);
      window.addEventListener("resize", throttledResize);

      return () => {
        throttledResize.cancel();
        if (containerRef.current) {
          resizeObserver.unobserve(containerRef.current);
        }
        window.removeEventListener("resize", throttledResize);
        if (animationFrameRef.current) {
          cancelAnimationFrame(animationFrameRef.current);
        }
        if (rendererRef.current && containerRef.current) {
          containerRef.current.removeChild(rendererRef.current.domElement);
          rendererRef.current.dispose();
        }
        gsap.killTweensOf("*");
      };
    }

    // 建错误函数
    const showErrorAnimation = () => {
      if (!scene) return;

      const { particles, positionArray, colorArray, particleSize } =
        createErrorParticles(width, height);

      const material = new THREE.PointsMaterial({
        size: particleSize,
        vertexColors: true,
        transparent: true,
        opacity: 1,
        sizeAttenuation: true,
        blending: THREE.AdditiveBlending,
        depthWrite: false,
        depthTest: false,
      });

      const geometry = new THREE.BufferGeometry();
      geometry.setAttribute(
        "position",
        new THREE.Float32BufferAttribute(positionArray, 3),
      );
      geometry.setAttribute(
        "color",
        new THREE.Float32BufferAttribute(colorArray, 3),
      );

      const points = new THREE.Points(geometry, material);
      scene.clear();
      scene.add(points);

      const positionAttribute = geometry.attributes.position;

      particles.forEach((particle, i) => {
        const i3 = i * 3;
        gsap.to(positionAttribute.array, {
          duration: 0.6,
          delay: Math.random() * 0.2,
          [i3]: particle.originalX,
          [i3 + 1]: particle.originalY,
          [i3 + 2]: 0,
          ease: "back.out(1.7)",
          onUpdate: () => {
            positionAttribute.needsUpdate = true;
          },
          onComplete: () => {
            // 添加标记表示错误动画已完成
            if (scene) {
              scene.userData.isErrorComplete = true;
            }
          },
        });
      });
    };

    // 加载
    const img = new Image();
    img.crossOrigin = "anonymous";

    const timeoutId = setTimeout(() => {
      showErrorAnimation();
    }, 5000); // 5秒超时

    img.onload = () => {
      clearTimeout(timeoutId);

      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");

      if (ctx) {
        // 增加一个小的边距以确保盖
        const padding = 2; // 添加2像素的距
        canvas.width = width + padding * 2;
        canvas.height = height + padding * 2;

        const targetAspect = width / height;
        const imgAspect = img.width / img.height;

        let sourceWidth = img.width;
        let sourceHeight = img.height;
        let sourceX = 0;
        let sourceY = 0;

        if (imgAspect > targetAspect) {
          sourceWidth = img.height * targetAspect;
          sourceX = (img.width - sourceWidth) / 2;
        } else {
          sourceHeight = img.width / targetAspect;
          sourceY = (img.height - sourceHeight) / 2;
        }

        // 绘制时考虑padding
        ctx.drawImage(
          img,
          sourceX,
          sourceY,
          sourceWidth,
          sourceHeight,
          padding,
          padding,
          width,
          height,
        );

        // 采样时也要考虑padding
        const imageData = ctx.getImageData(padding, padding, width, height);

        const particles: Particle[] = [];
        const positionArray = [];
        const colorArray = [];
        const samplingGap = Math.ceil(Math.max(width, height) / 80);

        // 采样裁剪的图片像素
        for (let y = 0; y < height; y += samplingGap) {
          for (let x = 0; x < width; x += samplingGap) {
            const i = (y * width + x) * 4;
            const r = imageData.data[i] / 255;
            const g = imageData.data[i + 1] / 255;
            const b = imageData.data[i + 2] / 255;
            const a = imageData.data[i + 3] / 255;

            if (a > 0.3) {
              const distanceToCenter = Math.sqrt(
                Math.pow(x - width / 2, 2) + Math.pow(y - height / 2, 2),
              );
              const maxDistance = Math.sqrt(
                Math.pow(width / 2, 2) + Math.pow(height / 2, 2),
              );
              const normalizedDistance = distanceToCenter / maxDistance;

              const px = x - width / 2;
              const py = height / 2 - y;

              particles.push({
                x: px,
                y: py,
                z: 0,
                originalX: px,
                originalY: py,
                originalColor: new THREE.Color(r, g, b),
                delay: normalizedDistance * 0.3,
              });

              // 机初始位置（根据距离调范围）
              const spread = 1 - normalizedDistance * 0.5; // 距离越远，扩散越小
              positionArray.push(
                (Math.random() - 0.5) * width * spread,
                (Math.random() - 0.5) * height * spread,
                (Math.random() - 0.5) * 50 * spread,
              );

              colorArray.push(r, g, b);
            }
          }
        }
        const size = Math.min(width, height);
        const scale = size / 200;
        const particleSize = Math.max(1.2, scale * 1.2);

        const geometry = new THREE.BufferGeometry();
        const material = new THREE.PointsMaterial({
          size: particleSize,
          vertexColors: true,
          transparent: true,
          opacity: 1,
          sizeAttenuation: true,
          blending: THREE.AdditiveBlending,
          depthWrite: false,
          depthTest: false,
        });

        scene.clear();
        geometry.setAttribute(
          "position",
          new THREE.Float32BufferAttribute(positionArray, 3),
        );
        geometry.setAttribute(
          "color",
          new THREE.Float32BufferAttribute(colorArray, 3),
        );

        const points = new THREE.Points(geometry, material);
        scene.add(points);

        // 画
        const positionAttribute = geometry.attributes.position;
        const colorAttribute = geometry.attributes.color;

        let completedAnimations = 0;
        const totalAnimations = particles.length * 2; // 置和颜色动画

        const checkComplete = () => {
          completedAnimations++;
          if (completedAnimations === totalAnimations) {
            onLoad?.();
            onAnimationComplete?.();
          }
        };

        particles.forEach((particle, i) => {
          const i3 = i * 3;

          // 位置动画
          gsap.to(positionAttribute.array, {
            duration: 1.2 + Math.random() * 0.3,
            delay: particle.delay,
            [i3]: particle.originalX,
            [i3 + 1]: particle.originalY,
            [i3 + 2]: 0,
            ease: customEase,
            onUpdate: () => {
              positionAttribute.needsUpdate = true;
            },
            onComplete: checkComplete,
          });

          // 色动画
          gsap.to(colorAttribute.array, {
            duration: 1,
            delay: particle.delay + 0.2,
            [i3]: particle.originalColor.r,
            [i3 + 1]: particle.originalColor.g,
            [i3 + 2]: particle.originalColor.b,
            ease: "power2.inOut",
            onUpdate: () => {
              colorAttribute.needsUpdate = true;
            },
            onComplete: checkComplete,
          });
        });

        // 修改动画序列部分
        const timeline = gsap.timeline({
          defaults: { ease: "power2.inOut" },
        });

        const imgElement = document.querySelector(
          `img[src="${src}"]`,
        ) as HTMLImageElement;
        if (imgElement) {
          // 设置初始状态
          gsap.set(imgElement, { opacity: 0 });

          timeline
            .to(imgElement, {
              opacity: 1,
              duration: 0.8,
              delay: 1.6,
            })
            .to(
              material,
              {
                opacity: 0,
                duration: 0.8,
              },
              "-=0.6",
            ); // 前开始消失
        }

        return { particles, positionArray, colorArray, particleSize };
      }
    };

    img.src = src || "";

    // 画循环
    const animate = () => {
      if (renderer && scene && camera) {
        renderer.render(scene, camera);
      }
      animationFrameRef.current = requestAnimationFrame(animate);
    };
    animate();

    // 添加 resize 监听
    const resizeObserver = new ResizeObserver(handleResize);
    resizeObserver.observe(containerRef.current);

    // 添加窗口 resize 监听
    window.addEventListener("resize", handleResize);

    return () => {
      clearTimeout(timeoutId);
      if (animationFrameRef.current) {
        cancelAnimationFrame(animationFrameRef.current);
      }
      if (renderer && containerRef.current) {
        containerRef.current.removeChild(renderer.domElement);
        renderer.dispose();
      }
      // 清有 GSAP 画
      gsap.killTweensOf("*");

      // 移除 resize 监听
      if (containerRef.current) {
        resizeObserver.unobserve(containerRef.current);
      }
      window.removeEventListener("resize", handleResize);
    };
  }, [cleanup, src, handleResize, onLoad, onAnimationComplete]);

  return <div ref={containerRef} className="w-full h-full" />;
};

let instanceCounter = 0;

// 添加性能检测函数
const detectDevicePerformance = () => {
  // 检查是否在浏览器环境
  if (typeof window === "undefined") {
    return 1; // 服务器端返回默认值
  }

  try {
    // 检查是否支持 hardwareConcurrency
    const cores = navigator?.hardwareConcurrency || 2;

    // 检查设备内 (如果支持)
    const memory = (navigator as any)?.deviceMemory || 4;

    // 检查是否为移动设备
    const isMobile =
      typeof navigator !== "undefined"
        ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
            navigator.userAgent,
          )
        : false;

    // 基于性能指标计算并发数
    let concurrent = 1; // 默认值

    if (!isMobile) {
      if (cores >= 8 && memory >= 8) {
        concurrent = 4; // 高性能设备
      } else if (cores >= 4 && memory >= 4) {
        concurrent = 3; // 中等性能设备
      } else {
        concurrent = 2; // 较低性能设备
      }
    }

    return concurrent;
  } catch (error) {
    console.warn("性能检测失败，使用默认值:", error);
    return 1; // 出错时返回最保守的值
  }
};

// 修改队列管理
const loadingQueue = {
  items: new Map<
    string,
    {
      isProcessing: boolean;
      instanceId: string;
      isLongConnection: boolean;
      lastActiveTime?: number;
      lastProcessState?: boolean;
      lastLogTime?: number; // 添加这个字段来控制日志输出频率
    }
  >(),
  pendingQueue: new Set<string>(), // 备选队列，存储已加载完成的长连接
  maxConcurrent: 1,
  currentProcessing: 0,

  get availableSlots() {
    // 只计算普通请求的槽位，排除错误和长连接
    const normalProcessing = Array.from(this.items.values()).filter(
      (item) => item.isProcessing && !item.isLongConnection,
    ).length;
    return this.maxConcurrent - normalProcessing;
  },

  add(url: string, instanceId: string, isLongConnection = false) {
    const key = `${instanceId}:${url}`;
    if (!this.items.has(key)) {
      this.items.set(key, {
        isProcessing: false,
        instanceId,
        isLongConnection,
        lastActiveTime: Date.now(),
      });

      // 连接<E8BF9E><E68EA5>再直接进入备选队列，而是等待加载完成后再加入
      this.processQueue();
      return true;
    }
    return false;
  },

  processQueue() {
    if (this.availableSlots > 0) {
      let nextKey: string | undefined;

      // 修改这部分逻辑，不再区分长连接和普通请求
      const nextItem = Array.from(this.items.entries()).find(
        ([_, item]) => !item.isProcessing,
      );

      if (nextItem) {
        nextKey = nextItem[0];
      }

      if (nextKey) {
        this.startProcessing(nextKey);
      }
    }
  },

  startProcessing(key: string) {
    const item = this.items.get(key);
    if (item && !item.isProcessing) {
      item.isProcessing = true;

      // 只有普通请求且不是错误状态时才增加处理数量
      if (!item.isLongConnection && !key.includes("error")) {
        this.currentProcessing++;
      }
    }
  },

  // 添加新方法：将长连接添加到备选队列
  addToPending(url: string, instanceId: string) {
    const key = `${instanceId}:${url}`;
    const item = this.items.get(key);
    if (item?.isLongConnection) {
      this.pendingQueue.add(key);
    }
  },

  remove(url: string, instanceId: string) {
    const key = `${instanceId}:${url}`;
    const item = this.items.get(key);

    // 只有普通请求且正在处理时才减少处理数量
    if (
      item?.isProcessing &&
      !item.isLongConnection &&
      !key.includes("error")
    ) {
      this.currentProcessing--;
    }

    // 确保从队列中移除
    this.items.delete(key);
    this.pendingQueue.delete(key);

    // 如果是错误状态，立即处理下一个请求
    if (key.includes("error")) {
      this.processQueue();
    } else {
      // 使用 requestAnimationFrame 来确保状态更新后再处理队列
      requestAnimationFrame(() => {
        this.processQueue();
      });
    }
  },

  canProcess(url: string, instanceId: string): boolean {
    const key = `${instanceId}:${url}`;
    const item = this.items.get(key);

    // 错误状态的处理保持不变
    if (key.includes("error")) {
      if (!item?.lastLogTime) {
        if (item) {
          item.lastLogTime = Date.now();
        }
      }
      return true;
    }

    // 移除长连接的特殊处理，统一处理所有请求
    const canProcess = item?.isProcessing || false;

    if (
      item &&
      (item.lastProcessState !== canProcess ||
        !item.lastLogTime ||
        Date.now() - item.lastLogTime > 1000)
    ) {
      item.lastProcessState = canProcess;
      item.lastLogTime = Date.now();
    }
    return canProcess;
  },
};

// 在组件挂载时更新 maxConcurrent
if (typeof window !== "undefined") {
  loadingQueue.maxConcurrent = detectDevicePerformance();
}

export const ImageLoader = ({
  src,
  alt,
  className,
}: {
  src?: string;
  alt: string;
  className: string;
}) => {
  // 为每个实例创唯一ID
  const instanceId = useRef(`img-${++instanceCounter}`);
  // 保持现有的状态和引用
  const [status, setStatus] = useState<LoaderStatus>({
    isLoading: true,
    hasError: false,
    timeoutError: false,
  });
  const [showImage, setShowImage] = useState(false);
  const timeoutRef = useRef<NodeJS.Timeout>();
  const loadingRef = useRef(false);
  const imageRef = useRef<HTMLImageElement | null>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const [animationComplete, setAnimationComplete] = useState(false);

  // 把 useEffect 移到这里
  useEffect(() => {
    if (!src) return;

    setShowImage(false);
    setAnimationComplete(false);
    setCanShowParticles(false);

    loadingQueue.add(src, instanceId.current);

    const checkQueue = () => {
      if (loadingQueue.canProcess(src, instanceId.current)) {
        const now = Date.now();
        const timeSinceLastAnimation = now - lastAnimationTime;

        if (particleLoadQueue.size === 0) {
          particleLoadQueue.add(src);
          setCanShowParticles(true);
          lastAnimationTime = now;
          return;
        }

        const delay = Math.max(
          MIN_DELAY,
          Math.min(ANIMATION_THRESHOLD, timeSinceLastAnimation),
        );

        const timer = setTimeout(() => {
          const key = `${instanceId.current}:${src}`;
          if (!loadingQueue.items.has(key)) return;

          particleLoadQueue.add(src);
          setCanShowParticles(true);
          lastAnimationTime = Date.now();
        }, delay);

        return () => {
          clearTimeout(timer);
          particleLoadQueue.delete(src);
        };
      }

      const timer = setTimeout(checkQueue, 100);
      return () => clearTimeout(timer);
    };

    const cleanup = checkQueue();

    return () => {
      cleanup?.();
      loadingQueue.remove(src, instanceId.current);
    };
  }, [src]);

  // 处理图片加载
  const preloadImage = useCallback(() => {
    if (!src || loadingRef.current) return;

    loadingRef.current = true;

    // 清理之前的资源
    if (imageRef.current) {
      imageRef.current.src = "";
      imageRef.current = null;
    }

    if (timeoutRef.current) {
      clearTimeout(timeoutRef.current);
    }

    setStatus({
      isLoading: true,
      hasError: false,
      timeoutError: false,
    });
    setShowImage(false);

    const img = new Image();
    img.crossOrigin = "anonymous";

    timeoutRef.current = setTimeout(() => {
      loadingRef.current = false;
      setStatus({
        isLoading: false,
        hasError: true,
        timeoutError: true,
      });

      // 超时时触发错误动画
      setCanShowParticles(true);
      if (src) {
        loadingQueue.remove(src, instanceId.current);
        particleLoadQueue.delete(src);
      }
    }, 5000);

    img.onload = () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }

      // 在图片加载成功后，立即创建缓存一个适应容器大小的图片
      if (containerRef.current) {
        const canvas = document.createElement("canvas");
        const ctx = canvas.getContext("2d");

        if (ctx) {
          const containerWidth = containerRef.current.offsetWidth;
          const containerHeight = containerRef.current.offsetHeight;

          canvas.width = containerWidth;
          canvas.height = containerHeight;

          // 保持比例绘制图片
          const targetAspect = containerWidth / containerHeight;
          const imgAspect = img.width / img.height;

          let sourceWidth = img.width;
          let sourceHeight = img.height;
          let sourceX = 0;
          let sourceY = 0;

          if (imgAspect > targetAspect) {
            sourceWidth = img.height * targetAspect;
            sourceX = (img.width - sourceWidth) / 2;
          } else {
            sourceHeight = img.width / targetAspect;
            sourceY = (img.height - sourceHeight) / 2;
          }

          ctx.drawImage(
            img,
            sourceX,
            sourceY,
            sourceWidth,
            sourceHeight,
            0,
            0,
            containerWidth,
            containerHeight,
          );

          // 创建新的图片对象，使用调整后的canvas数据
          const adjustedImage = new Image();
          adjustedImage.src = canvas.toDataURL();
          imageRef.current = adjustedImage;
        }
      } else {
        imageRef.current = img;
      }

      // 如果是长连接，加载成功后添加到备选队列
      if (src && src === src) {
        // 相同URL判断
        loadingQueue.addToPending(src, instanceId.current);
      }

      loadingRef.current = false;
      setStatus({
        isLoading: false,
        hasError: false,
        timeoutError: false,
      });
    };

    img.onerror = () => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
      loadingRef.current = false;
      setStatus({
        isLoading: false,
        hasError: true,
        timeoutError: false,
      });

      // 错误时立即触发错误动画
      setCanShowParticles(true);

      if (src) {
        loadingQueue.remove(src, instanceId.current);
        particleLoadQueue.delete(src);
      }
    };

    if (src) {
      img.src = src;
    }
  }, [src]);

  useEffect(() => {
    preloadImage();

    return () => {
      loadingRef.current = false;
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }
    };
  }, [src, preloadImage]);

  // 添加一个<E4B880><E4B8AA><EFBFBD>的状来控制粒子动画
  const [canShowParticles, setCanShowParticles] = useState(false);

  // 添加加载动画组件
  const LoadingSpinner = () => (
    <div className="absolute inset-0 flex items-center justify-center">
      <div className="w-8 h-8 border-2 border-[--accent-9] border-t-transparent rounded-full animate-spin" />
    </div>
  );

  return (
    <div className="relative w-full h-full overflow-hidden">
      <div
        className={`absolute inset-0 ${BG_CONFIG.className} rounded-lg overflow-hidden`}
      >
        {src && (status.isLoading || !canShowParticles) && <LoadingSpinner />}

        {(!src || (src && !animationComplete && canShowParticles)) && (
          <ParticleImage
            src={src}
            status={status}
            onLoad={() => {
              if (imageRef.current) {
                // 保持为空
              }
            }}
            onAnimationComplete={() => {
              if (imageRef.current && src) {
                setShowImage(true);

                requestAnimationFrame(() => {
                  setAnimationComplete(true);
                  particleLoadQueue.delete(src);
                  loadingQueue.remove(src, instanceId.current);

                  setTimeout(() => {
                    const img = document.querySelector(
                      `img[src="${imageRef.current?.src}"]`,
                    ) as HTMLImageElement;
                    if (img) {
                      img.style.opacity = "1";
                    }
                  }, 50);
                });
              }
            }}
          />
        )}
      </div>
      {/* 保持现图片渲染部分 */}
      {!status.hasError && !status.timeoutError && imageRef.current && (
        <div className="absolute inset-0 rounded-lg overflow-hidden">
          <img
            src={imageRef.current.src}
            alt={alt}
            className={`w-full h-full object-cover ${className}`}
            style={{
              opacity: 0,
              visibility: showImage ? "visible" : "hidden",
              objectFit: "cover",
              objectPosition: "center",
              willChange: "opacity, transform",
              transition: "opacity 0.5s ease-in-out",
              transform: "scale(1.015)",
              transformOrigin: "center bottom",
            }}
          />
        </div>
      )}
    </div>
  );
};