Record scroll test (#2783)

* perf: history add scrollList (#2696)

* perf: chatHistorySlider add virtualList

* perf: chat records add scrollList

* delete console

* perf: ScrollData add ref props

* 优化代码

* optimize code && add line breaks

* add total records display

* finish test

* perf: ScrollComponent load data

* perf: Scroll components load

* perf: scroll code

---------

Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>

packages/web/hooks/useConfirm.tsx

@@ -1,7 +1,8 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useDisclosure, Button, ModalBody, ModalFooter } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import MyModal from '../components/common/MyModal';
+import { useMemoizedFn } from 'ahooks';
 
 export const useConfirm = (props?: {
   title?: string;
@@ -44,7 +45,7 @@ export const useConfirm = (props?: {
   const confirmCb = useRef<Function>();
   const cancelCb = useRef<any>();
 
-  const openConfirm = useCallback(
+  const openConfirm = useMemoizedFn(
     (confirm?: Function, cancel?: any, customContent?: string | React.ReactNode) => {
       confirmCb.current = confirm;
       cancelCb.current = cancel;
@@ -52,11 +53,10 @@ export const useConfirm = (props?: {
       customContent && setCustomContent(customContent);
 
       return onOpen;
-    },
-    []
+    }
   );
 
-  const ConfirmModal = useCallback(
+  const ConfirmModal = useMemoizedFn(
     ({
       closeText = t('common:common.Cancel'),
       confirmText = t('common:common.Confirm'),
@@ -128,8 +128,7 @@ export const useConfirm = (props?: {
           )}
         </MyModal>
       );
-    },
-    [customContent, hideFooter, iconSrc, isOpen, map.variant, onClose, showCancel, t, title]
+    }
   );
 
   return {

packages/web/hooks/usePagination.tsx

@@ -1,9 +1,10 @@
-import { useRef, useState, useCallback, useMemo } from 'react';
+import { useRef, useState, useCallback, RefObject, ReactNode, useMemo } from 'react';
 import { IconButton, Flex, Box, Input, BoxProps } from '@chakra-ui/react';
 import { ArrowBackIcon, ArrowForwardIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'next-i18next';
 import { useToast } from './useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
+
 import {
   useBoolean,
   useLockFn,
@@ -13,6 +14,8 @@ import {
   useThrottleEffect
 } from 'ahooks';
 
+const thresholdVal = 200;
+
 type PagingData<T> = {
   pageNum: number;
   pageSize: number;
@@ -27,7 +30,9 @@ export function usePagination<ResT = any>({
   defaultRequest = true,
   type = 'button',
   onChange,
-  refreshDeps
+  refreshDeps,
+  scrollLoadType = 'bottom',
+  EmptyTip
 }: {
   api: (data: any) => Promise<PagingData<ResT>>;
   pageSize?: number;
@@ -36,61 +41,83 @@ export function usePagination<ResT = any>({
   type?: 'button' | 'scroll';
   onChange?: (pageNum: number) => void;
   refreshDeps?: any[];
+  throttleWait?: number;
+  scrollLoadType?: 'top' | 'bottom';
+  EmptyTip?: React.JSX.Element;
 }) {
   const { toast } = useToast();
   const { t } = useTranslation();
-  const [pageNum, setPageNum] = useState(1);
-
-  const ScrollContainerRef = useRef<HTMLDivElement>(null);
-
-  const noMore = useRef(false);
 
   const [isLoading, { setTrue, setFalse }] = useBoolean(false);
 
   const [total, setTotal] = useState(0);
   const [data, setData] = useState<ResT[]>([]);
+  const totalDataLength = useMemo(() => Math.max(total, data.length), [total, data.length]);
 
-  const maxPage = useMemo(() => Math.ceil(total / pageSize) || 1, [pageSize, total]);
+  const isEmpty = total === 0 && !isLoading;
+  const pageNum = useMemo(() => Math.ceil(data.length / pageSize), [data.length, pageSize]);
+  const noMore = data.length >= totalDataLength;
 
-  const fetchData = useLockFn(async (num: number = pageNum) => {
-    if (noMore.current && num !== 1) return;
-    setTrue();
+  const fetchData = useLockFn(
+    async (num: number = pageNum, ScrollContainerRef?: RefObject<HTMLDivElement>) => {
+      if (noMore && num !== 1) return;
+      setTrue();
 
-    try {
-      const res: PagingData<ResT> = await api({
-        pageNum: num,
-        pageSize,
-        ...params
-      });
+      try {
+        const res: PagingData<ResT> = await api({
+          pageNum: num,
+          pageSize,
+          ...params
+        });
 
-      // Check total and set
-      res.total !== undefined && setTotal(res.total);
+        // Check total and set
+        res.total !== undefined && setTotal(res.total);
 
-      if (res.total !== undefined && res.total <= data.length + res.data.length) {
-        noMore.current = true;
+        if (type === 'scroll') {
+          if (scrollLoadType === 'top') {
+            const prevHeight = ScrollContainerRef?.current?.scrollHeight || 0;
+            const prevScrollTop = ScrollContainerRef?.current?.scrollTop || 0;
+            // 使用 requestAnimationFrame 来调整滚动位置
+            function adjustScrollPosition() {
+              requestAnimationFrame(
+                ScrollContainerRef?.current
+                  ? () => {
+                      if (ScrollContainerRef?.current) {
+                        const newHeight = ScrollContainerRef.current.scrollHeight;
+                        const heightDiff = newHeight - prevHeight;
+                        ScrollContainerRef.current.scrollTop = prevScrollTop + heightDiff;
+                      }
+                    }
+                  : adjustScrollPosition
+              );
+            }
+
+            setData((prevData) => (num === 1 ? res.data : [...res.data, ...prevData]));
+            adjustScrollPosition();
+          } else {
+            setData((prevData) => (num === 1 ? res.data : [...prevData, ...res.data]));
+          }
+        } else {
+          setData(res.data);
+        }
+
+        onChange?.(num);
+      } catch (error: any) {
+        toast({
+          title: getErrText(error, t('common:core.chat.error.data_error')),
+          status: 'error'
+        });
+        console.log(error);
       }
 
-      setPageNum(num);
-
-      if (type === 'scroll') {
-        setData((prevData) => (num === 1 ? res.data : [...prevData, ...res.data]));
-      } else {
-        setData(res.data);
-      }
-
-      onChange?.(num);
-    } catch (error: any) {
-      toast({
-        title: getErrText(error, t('common:core.chat.error.data_error')),
-        status: 'error'
-      });
-      console.log(error);
+      setFalse();
     }
+  );
 
-    setFalse();
-  });
-
+  // Button pagination
   const Pagination = useCallback(() => {
+    const maxPage = Math.ceil(totalDataLength / pageSize);
+
     return (
       <Flex alignItems={'center'} justifyContent={'end'}>
         <IconButton
@@ -151,7 +178,74 @@ export function usePagination<ResT = any>({
         />
       </Flex>
     );
-  }, [isLoading, maxPage, fetchData, pageNum]);
+  }, [isLoading, totalDataLength, pageSize, fetchData, pageNum]);
+
+  // Scroll pagination
+  const DefaultRef = useRef<HTMLDivElement>(null);
+  const ScrollData = useMemoizedFn(
+    ({
+      children,
+      ScrollContainerRef,
+      ...props
+    }: {
+      children: ReactNode;
+      ScrollContainerRef?: RefObject<HTMLDivElement>;
+    } & BoxProps) => {
+      const ref = ScrollContainerRef || DefaultRef;
+      const loadText = (() => {
+        if (isLoading) return t('common:common.is_requesting');
+        if (noMore) return t('common:common.request_end');
+        return t('common:common.request_more');
+      })();
+
+      const scroll = useScroll(ref);
+
+      // Watch scroll position
+      useThrottleEffect(
+        () => {
+          if (!ref?.current || type !== 'scroll' || noMore) return;
+          const { scrollTop, scrollHeight, clientHeight } = ref.current;
+
+          if (
+            (scrollLoadType === 'bottom' &&
+              scrollTop + clientHeight >= scrollHeight - thresholdVal) ||
+            (scrollLoadType === 'top' && scrollTop < thresholdVal)
+          ) {
+            fetchData(pageNum + 1, ref);
+          }
+        },
+        [scroll],
+        { wait: 50 }
+      );
+
+      return (
+        <Box {...props} ref={ref} overflow={'overlay'}>
+          {scrollLoadType === 'top' && total > 0 && isLoading && (
+            <Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
+              {t('common:common.is_requesting')}
+            </Box>
+          )}
+          {children}
+          {scrollLoadType === 'bottom' && !isEmpty && (
+            <Box
+              mt={2}
+              fontSize={'xs'}
+              color={'blackAlpha.500'}
+              textAlign={'center'}
+              cursor={loadText === t('common:common.request_more') ? 'pointer' : 'default'}
+              onClick={() => {
+                if (loadText !== t('common:common.request_more')) return;
+                fetchData(pageNum + 1);
+              }}
+            >
+              {loadText}
+            </Box>
+          )}
+          {isEmpty && EmptyTip}
+        </Box>
+      );
+    }
+  );
 
   // Reload data
   const { runAsync: refresh } = useRequest(
@@ -166,53 +260,10 @@ export function usePagination<ResT = any>({
     }
   );
 
-  const ScrollData = useMemoizedFn(
-    ({ children, ...props }: { children: React.ReactNode } & BoxProps) => {
-      const loadText = (() => {
-        if (isLoading) return t('common:common.is_requesting');
-        if (total <= data.length) return t('common:common.request_end');
-        return t('common:common.request_more');
-      })();
-
-      return (
-        <Box {...props} ref={ScrollContainerRef} overflow={'overlay'}>
-          {children}
-          <Box
-            mt={2}
-            fontSize={'xs'}
-            color={'blackAlpha.500'}
-            textAlign={'center'}
-            cursor={loadText === t('common:common.request_more') ? 'pointer' : 'default'}
-            onClick={() => {
-              if (loadText !== t('common:common.request_more')) return;
-              fetchData(pageNum + 1);
-            }}
-          >
-            {loadText}
-          </Box>
-        </Box>
-      );
-    }
-  );
-
-  // Scroll check
-  const scroll = useScroll(ScrollContainerRef);
-  useThrottleEffect(
-    () => {
-      if (!ScrollContainerRef?.current || type !== 'scroll' || total === 0) return;
-      const { scrollTop, scrollHeight, clientHeight } = ScrollContainerRef.current;
-      if (scrollTop + clientHeight >= scrollHeight - 100) {
-        fetchData(pageNum + 1);
-      }
-    },
-    [scroll],
-    { wait: 50 }
-  );
-
   return {
     pageNum,
     pageSize,
-    total,
+    total: totalDataLength,
     data,
     setData,
     isLoading,

packages/web/hooks/useScrollPagination.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { ReactNode, RefObject, useMemo, useRef, useState } from 'react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { useToast } from './useToast';
 import { getErrText } from '@fastgpt/global/common/error/utils';
@@ -16,6 +16,7 @@ import MyBox from '../components/common/MyBox';
 import { useTranslation } from 'next-i18next';
 
 type ItemHeight<T> = (index: number, data: T) => number;
+const thresholdVal = 200;
 
 export type ScrollListType = ({
   children,
@@ -28,7 +29,7 @@ export type ScrollListType = ({
   isLoading?: boolean;
 } & BoxProps) => React.JSX.Element;
 
-export function useScrollPagination<
+export function useVirtualScrollPagination<
   TParams extends PaginationProps,
   TData extends PaginationResponse
 >(
@@ -53,15 +54,14 @@ export function useScrollPagination<
   const { t } = useTranslation();
   const containerRef = useRef<HTMLDivElement>(null);
   const wrapperRef = useRef(null);
-
-  const noMore = useRef(false);
-
   const { toast } = useToast();
-  const [current, setCurrent] = useState(1);
+
   const [data, setData] = useState<TData['list']>([]);
   const [total, setTotal] = useState(0);
   const [isLoading, { setTrue, setFalse }] = useBoolean(false);
 
+  const noMore = data.length >= total;
+
   const [list] = useVirtualList<TData['list'][0]>(data, {
     containerTarget: containerRef,
     wrapperTarget: wrapperRef,
@@ -69,28 +69,26 @@ export function useScrollPagination<
     overscan
   });
 
-  const loadData = useLockFn(async (num: number = current) => {
-    if (noMore.current && num !== 1) return;
+  const loadData = useLockFn(async (init = false) => {
+    if (noMore && !init) return;
+
+    const offset = init ? 0 : data.length;
 
     setTrue();
 
     try {
       const res = await api({
-        current: num,
+        offset,
         pageSize,
         ...defaultParams
       } as TParams);
 
       setTotal(res.total);
-      setCurrent(num);
 
-      if (num === 1) {
+      if (offset === 0) {
         // init or reload
         setData(res.list);
-        noMore.current = res.list.length >= res.total;
       } else {
-        const totalLength = data.length + res.list.length;
-        noMore.current = totalLength >= res.total;
         setData((prev) => [...prev, ...res.list]);
       }
     } catch (error: any) {
@@ -125,7 +123,7 @@ export function useScrollPagination<
         <MyBox isLoading={isLoading} ref={containerRef} overflow={'overlay'} {...props}>
           <Box ref={wrapperRef}>
             {children}
-            {noMore.current && list.length > 0 && (
+            {noMore && list.length > 0 && (
               <Box py={4} textAlign={'center'} color={'myGray.600'} fontSize={'xs'}>
                 {t('common:common.No more data')}
               </Box>
@@ -141,7 +139,7 @@ export function useScrollPagination<
   // Reload data
   useRequest(
     async () => {
-      loadData(1);
+      loadData(true);
     },
     {
       manual: false,
@@ -155,9 +153,9 @@ export function useScrollPagination<
     () => {
       if (!containerRef.current || list.length === 0) return;
       const { scrollTop, scrollHeight, clientHeight } = containerRef.current;
-      console.log('=======', 111111);
-      if (scrollTop + clientHeight >= scrollHeight - 100) {
-        loadData(current + 1);
+
+      if (scrollTop + clientHeight >= scrollHeight - thresholdVal) {
+        loadData(false);
       }
     },
     [scroll],
@@ -178,3 +176,178 @@ export function useScrollPagination<
     scroll2Top
   };
 }
+
+export function useScrollPagination<
+  TParams extends PaginationProps,
+  TData extends PaginationResponse
+>(
+  api: (data: TParams) => Promise<TData>,
+  {
+    refreshDeps,
+    scrollLoadType = 'bottom',
+
+    pageSize = 10,
+    params = {},
+    EmptyTip
+  }: {
+    refreshDeps?: any[];
+    scrollLoadType?: 'top' | 'bottom';
+
+    pageSize?: number;
+    params?: Record<string, any>;
+    EmptyTip?: React.JSX.Element;
+  }
+) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const [data, setData] = useState<TData['list']>([]);
+  const [total, setTotal] = useState(0);
+  const [isLoading, { setTrue, setFalse }] = useBoolean(false);
+  const isEmpty = total === 0 && !isLoading;
+
+  const noMore = data.length >= total;
+
+  const loadData = useLockFn(
+    async (init = false, ScrollContainerRef?: RefObject<HTMLDivElement>) => {
+      if (noMore && !init) return;
+
+      const offset = init ? 0 : data.length;
+
+      setTrue();
+
+      try {
+        const res = await api({
+          offset,
+          pageSize,
+          ...params
+        } as TParams);
+
+        setTotal(res.total);
+
+        if (scrollLoadType === 'top') {
+          const prevHeight = ScrollContainerRef?.current?.scrollHeight || 0;
+          const prevScrollTop = ScrollContainerRef?.current?.scrollTop || 0;
+          // 使用 requestAnimationFrame 来调整滚动位置
+          function adjustScrollPosition() {
+            requestAnimationFrame(
+              ScrollContainerRef?.current
+                ? () => {
+                    if (ScrollContainerRef?.current) {
+                      const newHeight = ScrollContainerRef.current.scrollHeight;
+                      const heightDiff = newHeight - prevHeight;
+                      ScrollContainerRef.current.scrollTop = prevScrollTop + heightDiff;
+                    }
+                  }
+                : adjustScrollPosition
+            );
+          }
+
+          setData((prevData) => (offset === 0 ? res.list : [...res.list, ...prevData]));
+          adjustScrollPosition();
+        } else {
+          setData((prevData) => (offset === 0 ? res.list : [...prevData, ...res.list]));
+        }
+      } catch (error: any) {
+        toast({
+          title: getErrText(error, t('common:core.chat.error.data_error')),
+          status: 'error'
+        });
+        console.log(error);
+      }
+
+      setFalse();
+    }
+  );
+
+  let ScrollRef = useRef<HTMLDivElement>(null);
+  const ScrollData = useMemoizedFn(
+    ({
+      children,
+      ScrollContainerRef,
+      ...props
+    }: {
+      children: ReactNode;
+      ScrollContainerRef?: RefObject<HTMLDivElement>;
+    } & BoxProps) => {
+      const ref = ScrollContainerRef || ScrollRef;
+      const loadText = useMemo(() => {
+        if (isLoading) return t('common:common.is_requesting');
+        if (noMore) return t('common:common.request_end');
+        return t('common:common.request_more');
+      }, [isLoading, noMore]);
+
+      const scroll = useScroll(ref);
+
+      // Watch scroll position
+      useThrottleEffect(
+        () => {
+          if (!ref?.current || noMore) return;
+          const { scrollTop, scrollHeight, clientHeight } = ref.current;
+
+          if (
+            (scrollLoadType === 'bottom' &&
+              scrollTop + clientHeight >= scrollHeight - thresholdVal) ||
+            (scrollLoadType === 'top' && scrollTop < thresholdVal)
+          ) {
+            loadData(false, ref);
+          }
+        },
+        [scroll],
+        { wait: 50 }
+      );
+
+      return (
+        <Box {...props} ref={ref} overflow={'overlay'}>
+          {scrollLoadType === 'top' && total > 0 && isLoading && (
+            <Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
+              {t('common:common.is_requesting')}
+            </Box>
+          )}
+          {children}
+          {scrollLoadType === 'bottom' && !isEmpty && (
+            <Box
+              mt={2}
+              fontSize={'xs'}
+              color={'blackAlpha.500'}
+              textAlign={'center'}
+              cursor={loadText === t('common:common.request_more') ? 'pointer' : 'default'}
+              onClick={() => {
+                if (loadText !== t('common:common.request_more')) return;
+                loadData(false);
+              }}
+            >
+              {loadText}
+            </Box>
+          )}
+          {isEmpty && EmptyTip}
+        </Box>
+      );
+    }
+  );
+
+  // Reload data
+  useRequest(
+    async () => {
+      loadData(true);
+    },
+    {
+      manual: false,
+      refreshDeps
+    }
+  );
+
+  const refreshList = useMemoizedFn(() => {
+    loadData(true);
+  });
+
+  return {
+    ScrollData,
+    isLoading,
+    total: Math.max(total, data.length),
+    data,
+    setData,
+    fetchData: loadData,
+    refreshList
+  };
+}