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);
|
||||
|
||||
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) {
|
||||
console.error('Failed to fetch knowledge base list:', error);
|
||||
if (!isLoadMore) {
|
||||
@@ -532,10 +544,10 @@ const KnowledgeBaseManagement: FC = () => {
|
||||
<InfiniteScroll
|
||||
dataLength={data.length}
|
||||
next={loadMore}
|
||||
hasMore={hasMore && !loading}
|
||||
loader={<div className="rb:text-center rb:py-4">{t('common.loading')}</div>}
|
||||
hasMore={hasMore}
|
||||
loader={loading && data.length > 0 ? <div className="rb:text-center rb:py-4">{t('common.loading')}</div> : null}
|
||||
endMessage={
|
||||
data.length > 0 ? (
|
||||
data.length > 0 && !hasMore ? (
|
||||
<div className="rb:text-center rb:py-4 rb:text-gray-400">
|
||||
{t('common.noMoreData')}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user