为表格增加懒加载功能，优化表格及详情查看速度

src/components/DataView.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Table, Input, Spin } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';
 
@@ -11,6 +11,44 @@ const DataView = ({
   searchText, 
   loading
 }) => {
+  // 用于跟踪当前显示的数据条数
+  const [displayCount, setDisplayCount] = useState(50);
+  // 用于存储表格容器的引用
+  const tableContainerRef = useRef(null);
+  // 当前显示的数据
+  const displayedData = projects.slice(0, displayCount);
+  
+  // 监听滚动事件
+  useEffect(() => {
+    const handleScroll = (e) => {
+      if (!tableContainerRef.current) return;
+      
+      const { scrollTop, scrollHeight, clientHeight } = e.target;
+      // 当滚动到距离底部20px以内时，加载更多数据
+      if (scrollHeight - scrollTop - clientHeight < 20) {
+        // 如果当前显示的数据少于总数据，则加载更多
+        if (displayCount < projects.length) {
+          setDisplayCount(prevCount => Math.min(prevCount + 50, projects.length));
+        }
+      }
+    };
+    
+    const tableContainer = tableContainerRef.current;
+    if (tableContainer) {
+      // 找到表格的滚动容器
+      const scrollContainer = tableContainer.querySelector('.ant-table-body');
+      if (scrollContainer) {
+        scrollContainer.addEventListener('scroll', handleScroll);
+        return () => scrollContainer.removeEventListener('scroll', handleScroll);
+      }
+    }
+  }, [displayCount, projects.length]);
+  
+  // 当projects改变时，重置显示数量
+  useEffect(() => {
+    setDisplayCount(50);
+  }, [projects]);
+  
   // 表格列定义
   const columns = [
     {
@@ -113,9 +151,10 @@ const DataView = ({
           <Spin />
         </div>
       ) : (
+        <div ref={tableContainerRef}>
           <Table
             columns={columns}
-          dataSource={projects}
+            dataSource={displayedData}
             rowKey="id"
             rowSelection={{
               type: 'checkbox',
@@ -132,6 +171,7 @@ const DataView = ({
             })}
             style={{ margin: '10px' }}
           />
+        </div>
       )}
     </div>
   );