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

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,25 +151,27 @@ const DataView = ({
           <Spin />
         </div>
       ) : (
-        <Table
+        <div ref={tableContainerRef}>
-          columns={columns}
+          <Table
-          dataSource={projects}
+            columns={columns}
-          rowKey="id"
+            dataSource={displayedData}
-          rowSelection={{
+            rowKey="id"
-            type: 'checkbox',
+            rowSelection={{
-            selectedRowKeys: selectedProjects,
+              type: 'checkbox',
-            onChange: onSelect,
+              selectedRowKeys: selectedProjects,
-          }}
+              onChange: onSelect,
-          pagination={false}
+            }}
-          scroll={{ y: 'calc(100vh - 150px)', x: 'max-content' }}
+            pagination={false}
-          size="small"
+            scroll={{ y: 'calc(100vh - 150px)', x: 'max-content' }}
-          bordered
+            size="small"
-          onRow={(record) => ({
+            bordered
-            onClick: () => onClick(record), // 点击行时调用传入的onClick函数
+            onRow={(record) => ({
-            style: { cursor: 'pointer' } // 鼠标悬停时显示指针样式
+              onClick: () => onClick(record), // 点击行时调用传入的onClick函数
-          })}
+              style: { cursor: 'pointer' } // 鼠标悬停时显示指针样式
-          style={{ margin: '10px' }}
+            })}
-        />
+            style={{ margin: '10px' }}
+          />
+        </div>
       )}
     </div>
   );