From 7044f705e764dd1d84bf5438b843eecb007ba2e0 Mon Sep 17 00:00:00 2001
From: yujiangping <yujiangping@taofen8.com>
Date: Tue, 10 Feb 2026 16:51:41 +0800
Subject: [PATCH] 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
---
 web/src/views/KnowledgeBase/index.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/web/src/views/KnowledgeBase/index.tsx b/web/src/views/KnowledgeBase/index.tsx
index cef520ab..1ad6997b 100644
--- a/web/src/views/KnowledgeBase/index.tsx
+++ b/web/src/views/KnowledgeBase/index.tsx
@@ -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>