fix(web): improve infinite scroll handling in knowledge base list
- Add auto-load detection when initial data doesn't fill viewport to prevent empty scrollbar - Implement scroll height check to automatically load more data if content is insufficient - Fix hasMore condition to prevent premature loader hiding - Update loader visibility to only show when data exists and is actively loading - Refine end message display to show only when all data is loaded and no more items available - Resolves issue where knowledge base list shows no scrollbar on initial load with limited items
This commit is contained in:
@@ -334,6 +334,18 @@ const KnowledgeBaseManagement: FC = () => {
|
|||||||
setHasMore(hasNext);
|
setHasMore(hasNext);
|
||||||
|
|
||||||
buildModelMenus(list, isLoadMore);
|
buildModelMenus(list, isLoadMore);
|
||||||
|
|
||||||
|
// 首次加载后,检查是否需要自动加载更多(解决无滚动条问题)
|
||||||
|
if (!isLoadMore && hasNext) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const scrollDiv = document.getElementById('scrollableDiv');
|
||||||
|
if (scrollDiv && scrollDiv.scrollHeight <= scrollDiv.clientHeight) {
|
||||||
|
console.log('No scrollbar detected, auto-loading more data');
|
||||||
|
setPage(2);
|
||||||
|
fetchData(2, true);
|
||||||
|
}
|
||||||
|
}, 100);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Failed to fetch knowledge base list:', error);
|
console.error('Failed to fetch knowledge base list:', error);
|
||||||
if (!isLoadMore) {
|
if (!isLoadMore) {
|
||||||
@@ -532,10 +544,10 @@ const KnowledgeBaseManagement: FC = () => {
|
|||||||
<InfiniteScroll
|
<InfiniteScroll
|
||||||
dataLength={data.length}
|
dataLength={data.length}
|
||||||
next={loadMore}
|
next={loadMore}
|
||||||
hasMore={hasMore && !loading}
|
hasMore={hasMore}
|
||||||
loader={<div className="rb:text-center rb:py-4">{t('common.loading')}</div>}
|
loader={loading && data.length > 0 ? <div className="rb:text-center rb:py-4">{t('common.loading')}</div> : null}
|
||||||
endMessage={
|
endMessage={
|
||||||
data.length > 0 ? (
|
data.length > 0 && !hasMore ? (
|
||||||
<div className="rb:text-center rb:py-4 rb:text-gray-400">
|
<div className="rb:text-center rb:py-4 rb:text-gray-400">
|
||||||
{t('common.noMoreData')}
|
{t('common.noMoreData')}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user