hiden dataset source (#4152)

* hiden dataset source

* perf: reader

packages/web/hooks/useLinkedScroll.tsx

@@ -1,10 +1,11 @@
-import { useCallback, useEffect, useRef, useState, ReactNode } from 'react';
+import { useEffect, useRef, useState, ReactNode, useCallback } from 'react';
 import { LinkedListResponse, LinkedPaginationProps } from '../common/fetch/type';
 import { Box, BoxProps } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { useScroll, useMemoizedFn, useDebounceEffect } from 'ahooks';
 import MyBox from '../components/common/MyBox';
 import { useRequest2 } from './useRequest';
+import { delay } from '../../global/common/system/utils';
 
 const threshold = 100;
 
@@ -14,92 +15,95 @@ export function useLinkedScroll<
 >(
   api: (data: TParams) => Promise<TData>,
   {
-    refreshDeps = [],
     pageSize = 15,
     params = {},
-    initialId,
-    initialIndex,
-    canLoadData = false
+    currentData
   }: {
-    refreshDeps?: any[];
     pageSize?: number;
     params?: Record<string, any>;
-    initialId?: string;
-    initialIndex?: number;
-    canLoadData?: boolean;
+    currentData?: { id: string; index: number };
   }
 ) {
   const { t } = useTranslation();
   const [dataList, setDataList] = useState<TData['list']>([]);
   const [hasMorePrev, setHasMorePrev] = useState(true);
   const [hasMoreNext, setHasMoreNext] = useState(true);
-  const [initialLoadDone, setInitialLoadDone] = useState(false);
-  const hasScrolledToInitial = useRef(false);
 
   const anchorRef = useRef({
     top: null as { _id: string; index: number } | null,
     bottom: null as { _id: string; index: number } | null
   });
-
   const containerRef = useRef<HTMLDivElement>(null);
   const itemRefs = useRef<(HTMLElement | null)[]>([]);
 
-  const { runAsync: callApi, loading: isLoading } = useRequest2(
-    async (apiParams: TParams) => await api(apiParams),
-    {
-      onError: (error) => {
-        return Promise.reject(error);
-      }
-    }
-  );
+  const scrollToItem = async (id: string, retry = 3) => {
+    const itemIndex = dataList.findIndex((item) => item._id === id);
+    if (itemIndex === -1) return;
 
-  const loadData = useCallback(
-    async ({
-      id,
-      index,
-      isInitialLoad = false
-    }: {
-      id: string;
-      index: number;
-      isInitialLoad?: boolean;
-    }) => {
-      if (isLoading) return null;
+    const element = itemRefs.current[itemIndex];
+
+    if (!element || !containerRef.current) {
+      if (retry > 0) {
+        await delay(500);
+        return scrollToItem(id, retry - 1);
+      }
+      return;
+    }
+
+    const elementRect = element.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+
+    const scrollTop = containerRef.current.scrollTop + elementRect.top - containerRect.top;
+
+    containerRef.current.scrollTo({
+      top: scrollTop
+    });
+  };
+
+  const { runAsync: callApi, loading: isLoading } = useRequest2(api);
+
+  let scroolSign = useRef(false);
+  const { runAsync: loadInitData } = useRequest2(
+    async (scrollWhenFinish = true) => {
+      if (!currentData || isLoading) return;
+
+      const item = dataList.find((item) => item._id === currentData.id);
+      if (item) {
+        scrollToItem(item._id);
+        return;
+      }
 
       const response = await callApi({
-        initialId: id,
-        initialIndex: index,
+        initialId: currentData.id,
+        initialIndex: currentData.index,
         pageSize,
-        isInitialLoad,
         ...params
       } as TParams);
 
-      if (!response) return null;
-
       setHasMorePrev(response.hasMorePrev);
       setHasMoreNext(response.hasMoreNext);
+
+      scroolSign.current = scrollWhenFinish;
       setDataList(response.list);
 
       if (response.list.length > 0) {
         anchorRef.current.top = response.list[0];
         anchorRef.current.bottom = response.list[response.list.length - 1];
       }
-
-      setInitialLoadDone(true);
-
-      const scrollIndex = response.list.findIndex((item) => item._id === id);
-
-      if (scrollIndex !== -1 && itemRefs.current?.[scrollIndex]) {
-        setTimeout(() => {
-          scrollToItem(scrollIndex);
-        }, 100);
-      }
-
-      return response;
     },
-    [callApi, params, dataList, hasMorePrev, hasMoreNext, isLoading]
+    {
+      refreshDeps: [currentData],
+      manual: false
+    }
   );
+  useEffect(() => {
+    if (scroolSign.current && currentData) {
+      scroolSign.current = false;
+      scrollToItem(currentData.id);
+    }
+  }, [dataList]);
 
-  const loadPrevData = useCallback(
+  const { runAsync: loadPrevData, loading: prevLoading } = useRequest2(
     async (scrollRef = containerRef) => {
       if (!anchorRef.current.top || !hasMorePrev || isLoading) return;
 
@@ -132,10 +136,12 @@ export function useLinkedScroll<
 
       return response;
     },
-    [callApi, hasMorePrev, isLoading, params, pageSize]
+    {
+      refreshDeps: [hasMorePrev, isLoading, params, pageSize]
+    }
   );
 
-  const loadNextData = useCallback(
+  const { runAsync: loadNextData, loading: nextLoading } = useRequest2(
     async (scrollRef = containerRef) => {
       if (!anchorRef.current.bottom || !hasMoreNext || isLoading) return;
 
@@ -165,85 +171,17 @@ export function useLinkedScroll<
 
       return response;
     },
-    [callApi, hasMoreNext, isLoading, params, pageSize]
-  );
-
-  const scrollToItem = useCallback(
-    (itemIndex: number) => {
-      if (itemIndex >= 0 && itemIndex < dataList.length && itemRefs.current?.[itemIndex]) {
-        try {
-          const element = itemRefs.current[itemIndex];
-          if (!element) {
-            return false;
-          }
-
-          setTimeout(() => {
-            if (element && containerRef.current) {
-              const elementRect = element.getBoundingClientRect();
-              const containerRect = containerRef.current.getBoundingClientRect();
-
-              const relativeTop = elementRect.top - containerRect.top;
-
-              const scrollTop =
-                containerRef.current.scrollTop +
-                relativeTop -
-                containerRect.height / 2 +
-                elementRect.height / 2;
-
-              containerRef.current.scrollTo({
-                top: scrollTop,
-                behavior: 'smooth'
-              });
-            }
-          }, 50);
-
-          return true;
-        } catch (error) {
-          console.error('Error scrolling to item:', error);
-          return false;
-        }
-      }
-      return false;
-    },
-    [dataList.length]
-  );
-
-  // 初始加载
-  useEffect(() => {
-    if (canLoadData) {
-      setInitialLoadDone(false);
-      hasScrolledToInitial.current = false;
-
-      loadData({
-        id: initialId || '',
-        index: initialIndex || 0,
-        isInitialLoad: true
-      });
+    {
+      refreshDeps: [hasMoreNext, isLoading, params, pageSize]
     }
-  }, [canLoadData, ...refreshDeps]);
-
-  // 监听初始加载完成，执行初始滚动
-  useEffect(() => {
-    if (initialLoadDone && dataList.length > 0 && !hasScrolledToInitial.current) {
-      const foundIndex = dataList.findIndex((item) => item._id === initialId);
-
-      if (foundIndex >= 0) {
-        hasScrolledToInitial.current = true;
-        setTimeout(() => {
-          scrollToItem(foundIndex);
-        }, 200);
-      }
-    }
-  }, [initialLoadDone, ...refreshDeps]);
+  );
 
   const ScrollData = useMemoizedFn(
     ({
       children,
       ScrollContainerRef,
-      isLoading: externalLoading,
       ...props
     }: {
-      isLoading?: boolean;
       children: ReactNode;
       ScrollContainerRef?: React.RefObject<HTMLDivElement>;
     } & BoxProps) => {
@@ -252,17 +190,17 @@ export function useLinkedScroll<
 
       useDebounceEffect(
         () => {
-          if (!ref?.current || isLoading || !initialLoadDone) return;
+          if (!ref?.current || isLoading) return;
 
           const { scrollTop, scrollHeight, clientHeight } = ref.current;
 
           // 滚动到底部附近，加载更多下方数据
-          if (scrollTop + clientHeight >= scrollHeight - threshold && hasMoreNext) {
+          if (scrollTop + clientHeight >= scrollHeight - threshold) {
             loadNextData(ref);
           }
 
           // 滚动到顶部附近，加载更多上方数据
-          if (scrollTop <= threshold && hasMorePrev) {
+          if (scrollTop <= threshold) {
             loadPrevData(ref);
           }
         },
@@ -271,20 +209,14 @@ export function useLinkedScroll<
       );
 
       return (
-        <MyBox
-          ref={ref}
-          h={'100%'}
-          overflow={'auto'}
-          isLoading={externalLoading || isLoading}
-          {...props}
-        >
-          {hasMorePrev && isLoading && initialLoadDone && (
+        <MyBox ref={ref} h={'100%'} overflow={'auto'} isLoading={isLoading} {...props}>
+          {hasMorePrev && prevLoading && (
             <Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
               {t('common:common.is_requesting')}
             </Box>
           )}
           {children}
-          {hasMoreNext && isLoading && initialLoadDone && (
+          {hasMoreNext && nextLoading && (
             <Box mt={2} fontSize={'xs'} color={'blackAlpha.500'} textAlign={'center'}>
               {t('common:common.is_requesting')}
             </Box>
@@ -298,7 +230,7 @@ export function useLinkedScroll<
     dataList,
     setDataList,
     isLoading,
-    loadData,
+    loadInitData,
     ScrollData,
     itemRefs,
     scrollToItem