feat: 优化滚动高度计算逻辑

Author: Taois

dashboard/src/components/SearchResults.vue

@@ -193,14 +193,43 @@ const updateScrollAreaHeight = () => {
       const searchHeader = document.querySelector('.search-header');
       const headerHeight = searchHeader ? searchHeader.offsetHeight : 60;
 
-      // 根据搜索结果动态调整高度减值
-      // 如果没有结果或结果很少，减去100px强制触发滚动条
-      // 如果有足够搜索结果，只减去少量padding空间
-      const hasEnoughContent = props.videos && props.videos.length >= 17;
-      const heightReduction = hasEnoughContent ? 4 : 100;
+      // 改进的高度计算逻辑：
+      // 1. 正确计算网格列数（基于容器宽度）
+      // 2. 估算内容实际需要的高度
+      // 3. 智能调整容器高度以确保滚动翻页正常工作
       
-      const newHeight = Math.max(containerHeight - headerHeight - heightReduction, 400);
-      console.log(`搜索结果数量: ${props.videos?.length || 0}, 内容充足: ${hasEnoughContent}, 高度减值: ${heightReduction}, 最终高度: ${newHeight}`);
+      const videoCount = props.videos ? props.videos.length : 0;
+      
+      // 获取容器宽度来计算列数
+      const containerWidth = container.offsetWidth || Math.max(window.innerWidth - 240, 800); // 减去侧边栏宽度
+      const itemWidth = 200; // 每个搜索结果项的估算宽度
+      const gridCols = Math.min(Math.floor(containerWidth / itemWidth), 8); // 基于宽度计算列数，最多8列
+      
+      const estimatedItemHeight = 328; // 根据F12实际测量的高度（图片+文字）
+      const estimatedRows = videoCount > 0 ? Math.ceil(videoCount / Math.max(gridCols, 1)) : 0;
+      const estimatedContentHeight = estimatedRows * estimatedItemHeight + 80; // 减少padding估算
+      
+      // 智能高度调整策略
+      let heightReduction = 4; // 默认只减去少量padding
+      const availableHeight = containerHeight - headerHeight;
+      
+      // 如果没有搜索结果数据，使用保守的高度减值
+      if (videoCount === 0) {
+        heightReduction = Math.min(availableHeight * 0.3, 200); // 减去30%或200px，取较小值
+        console.log(`无搜索结果数据，使用保守高度减值: ${heightReduction}px`);
+      } else if (estimatedContentHeight < availableHeight) {
+        // 有数据但内容不足时，需要减少容器高度以触发滚动
+        // 策略：容器高度 = 内容高度 - 120px（确保有足够滚动空间）
+        // 但如果这样会遮挡太多内容，则至少显示1.5行的高度
+        const minDisplayHeight = Math.floor(estimatedItemHeight * 1.5) + 80; // 至少显示1.5行
+        const idealHeight = estimatedContentHeight - 120; // 理想的滚动高度
+        const targetHeight = Math.max(idealHeight, minDisplayHeight, availableHeight * 0.4); // 取最大值确保不会太小
+        heightReduction = Math.max(availableHeight - targetHeight, 80); // 最少减去80px
+        console.log(`搜索内容高度不足，估算内容高度: ${estimatedContentHeight}px, 理想高度: ${idealHeight}px, 最小显示高度: ${minDisplayHeight}px, 可用高度: ${availableHeight}px, 调整高度减值: ${heightReduction}px`);
+      }
+      
+      const newHeight = Math.max(containerHeight - headerHeight - heightReduction, 300);
+      console.log(`搜索结果数量: ${videoCount}, 估算行数: ${estimatedRows}, 列数: ${gridCols}, 容器宽度: ${containerWidth}px, 最终高度: ${newHeight}px`);
       scrollAreaHeight.value = newHeight;
     }, 100); // 延迟确保DOM完全渲染
   });

dashboard/src/components/VideoGrid.vue

@@ -141,14 +141,42 @@ const updateScrollAreaHeight = () => {
         containerHeight = Math.max(window.innerHeight - 120, 500);
       }
 
-      // 根据视频内容动态调整高度减值
-      // 如果没有视频或视频很少，减去100px强制触发滚动条
-      // 如果有足够视频内容，只减去少量padding空间
-      const hasEnoughContent = props.videos && props.videos.length >= 17;
-      const heightReduction = hasEnoughContent ? 4 : 100;
+      // 改进的高度计算逻辑：
+      // 1. 正确计算网格列数（基于容器宽度）
+      // 2. 估算内容实际需要的高度
+      // 3. 智能调整容器高度以确保滚动翻页正常工作
       
-      const newHeight = Math.max(containerHeight - footerHeight - heightReduction, 400);
-      console.log(`视频数量: ${props.videos?.length || 0}, 内容充足: ${hasEnoughContent}, 高度减值: ${heightReduction}, 最终高度: ${newHeight}`);
+      const videoCount = props.videos ? props.videos.length : 0;
+      
+      // 获取容器宽度来计算列数
+      const containerWidth = container.offsetWidth || Math.max(window.innerWidth - 240, 800); // 减去侧边栏宽度
+      const itemWidth = 200; // 每个视频项的估算宽度
+      const gridCols = Math.min(Math.floor(containerWidth / itemWidth), 8); // 基于宽度计算列数，最多8列
+      
+      const estimatedItemHeight = 328; // 根据F12实际测量的高度（图片+文字）
+      const estimatedRows = videoCount > 0 ? Math.ceil(videoCount / Math.max(gridCols, 1)) : 0;
+      const estimatedContentHeight = estimatedRows * estimatedItemHeight + 80; // 减少padding估算
+      
+      // 智能高度调整策略
+      let heightReduction = 4; // 默认只减去少量padding
+      
+      // 如果没有视频数据，使用保守的高度减值来为后续数据加载预留空间
+      if (videoCount === 0) {
+        heightReduction = Math.min(containerHeight * 0.3, 200); // 减去30%或200px，取较小值
+        console.log(`无视频数据，使用保守高度减值: ${heightReduction}px`);
+      } else if (estimatedContentHeight < containerHeight) {
+        // 有数据但内容不足时，需要减少容器高度以触发滚动
+        // 策略：容器高度 = 内容高度 - 120px（确保有足够滚动空间）
+        // 但如果这样会遮挡太多内容，则至少显示1.5行的高度
+        const minDisplayHeight = Math.floor(estimatedItemHeight * 1.5) + 80; // 至少显示1.5行
+        const idealHeight = estimatedContentHeight - 120; // 理想的滚动高度
+        const targetHeight = Math.max(idealHeight, minDisplayHeight, containerHeight * 0.4); // 取最大值确保不会太小
+        heightReduction = Math.max(containerHeight - targetHeight, 80); // 最少减去80px
+        console.log(`内容高度不足，估算内容高度: ${estimatedContentHeight}px, 理想高度: ${idealHeight}px, 最小显示高度: ${minDisplayHeight}px, 容器高度: ${containerHeight}px, 调整高度减值: ${heightReduction}px`);
+      }
+      
+      const newHeight = Math.max(containerHeight - footerHeight - heightReduction, 300);
+      console.log(`视频数量: ${videoCount}, 估算行数: ${estimatedRows}, 列数: ${gridCols}, 容器宽度: ${containerWidth}px, 最终高度: ${newHeight}px`);
       scrollAreaHeight.value = newHeight;
     }, 100); // 增加延迟确保DOM完全渲染
   });