pref: UI优化

src/views/Community/components/DynamicNewsCard/VirtualizedFourRowGrid.js

@@ -11,6 +11,7 @@ import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
 /**
  * 虚拟化网格组件（支持多列布局 + 无限滚动）
  * @param {Object} props
+ * @param {string} props.display - CSS display 属性（用于显示/隐藏组件）
  * @param {Array} props.events - 事件列表（累积显示）
  * @param {number} props.columnsPerRow - 每行列数（默认 4，单列模式传 1）
  * @param {React.Component} props.CardComponent - 卡片组件（默认 DynamicNewsEventCard）
@@ -25,6 +26,7 @@ import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
  * @param {boolean} props.loading - 加载状态
  */
 const VirtualizedFourRowGrid = ({
+  display = 'block',
   events,
   columnsPerRow = 4,
   CardComponent = DynamicNewsEventCard,
@@ -92,6 +94,9 @@ const VirtualizedFourRowGrid = ({
    *   - 虚拟滚动缓存（渲染层）：@tanstack/react-virtual 只渲染可见行，复用 DOM 节点
    */
   useEffect(() => {
+    // 如果组件被隐藏，不执行滚动监听
+    if (display === 'none') return;
+
     const scrollElement = parentRef.current;
     if (!scrollElement) return;
 
@@ -136,7 +141,7 @@ const VirtualizedFourRowGrid = ({
 
     scrollElement.addEventListener('scroll', handleScroll);
     return () => scrollElement.removeEventListener('scroll', handleScroll);
-  }, [loadNextPage, onRefreshFirstPage, hasMore, loading]);
+  }, [display, loadNextPage, onRefreshFirstPage, hasMore, loading]);
 
   /**
    * 【核心逻辑2】主动检测内容高度 - 确保内容始终填满容器
@@ -155,6 +160,9 @@ const VirtualizedFourRowGrid = ({
    * - 监听 events.length 变化：新数据加载后重新检查
    */
   useEffect(() => {
+    // 如果组件被隐藏，不执行高度检测
+    if (display === 'none') return;
+
     const scrollElement = parentRef.current;
     if (!scrollElement || !loadNextPage) return;
 
@@ -180,7 +188,7 @@ const VirtualizedFourRowGrid = ({
     }, 500);
 
     return () => clearTimeout(timer);
-  }, [events.length, hasMore, loading, loadNextPage]);
+  }, [display, events.length, hasMore, loading, loadNextPage]);
 
   // 错误指示器（同行显示）
   const renderErrorIndicator = () => {
@@ -244,8 +252,10 @@ const VirtualizedFourRowGrid = ({
   return (
     <Box
       ref={parentRef}
+      display={display}
       overflowY="auto"
       overflowX="hidden"
+      minH="800px"
       maxH="800px"
       w="100%"
       position="relative"