完整的教务系统前端项目 - 包含所有修复和9月份数据

src/components/InfiniteScroll/index.jsx

@@ -0,0 +1,103 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { Empty, Spin } from "@arco-design/web-react";
+import "./index.css";
+
+const InfiniteScroll = ({
+  loadMore,
+  hasMore,
+  children,
+  threshold = 0.1, // 触发阈值，元素可见比例
+  className = "",
+  empty = false,
+}) => {
+  const containerRef = useRef(null);
+  const sentinelRef = useRef(null);
+  const observerRef = useRef(null);
+  const throttleRef = useRef(null); // 节流控制
+  const [loading, setLoading] = useState(false);
+  const [hasInitialized, setHasInitialized] = useState(false); // 首次挂载
+
+  // 加载更多数据的处理函数（带节流）
+  const handleLoadMore = useCallback(() => {
+    if (loading || !hasMore) return;
+
+    // 节流处理：500ms内只能触发一次
+    if (throttleRef.current) {
+      clearTimeout(throttleRef.current);
+    }
+
+    throttleRef.current = setTimeout(() => {
+      setLoading(true);
+      loadMore().finally(() => {
+        setLoading(false);
+        throttleRef.current = null;
+      });
+    }, 10);
+  }, [hasMore, loadMore, loading]);
+
+  // 设置IntersectionObserver
+  useEffect(() => {
+    // 初始化观察器
+    const options = {
+      root: containerRef.current,
+      rootMargin: "0px 0px 50px 0px", // 减少提前触发距离
+      threshold,
+    };
+
+    // 创建观察器实例
+    observerRef.current = new IntersectionObserver((entries) => {
+      const [entry] = entries;
+      if (entry.isIntersecting) {
+        handleLoadMore();
+      }
+    }, options);
+
+    // 开始观察哨兵元素
+    if (sentinelRef.current) {
+      observerRef.current.observe(sentinelRef.current);
+    }
+
+    // 初始加载检查 - 仅在组件首次挂载时执行
+    if (hasMore && !loading && !hasInitialized) {
+      setHasInitialized(true);
+      handleLoadMore();
+    }
+
+    // 清理函数
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+      // 清理节流定时器
+      if (throttleRef.current) {
+        clearTimeout(throttleRef.current);
+        throttleRef.current = null;
+      }
+    };
+  }, [loadMore, hasMore, threshold, loading, hasInitialized, handleLoadMore]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`infinite-scroll-container ${className}`}
+    >
+      {children}
+
+      {/* 哨兵元素 - 用于触发加载更多 */}
+      <div ref={sentinelRef} className="sentinel-element"></div>
+
+      {!hasMore && empty && (
+        <Empty description="暂无数据" className="empty-data" />
+      )}
+      {/* 滚动加载指示器 */}
+      {loading && hasMore && (
+        <div className="loading-container">
+          <Spin size={20} />
+          <span className="loading-text">加载中...</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default InfiniteScroll;