更新Company页面的UI为FUI风格

src/views/Community/components/DynamicNews/EventScrollList.js

@@ -7,15 +7,16 @@ import {
   useColorModeValue
 } from '@chakra-ui/react';
 import VirtualizedFourRowGrid from './layouts/VirtualizedFourRowGrid';
+import GroupedFourRowGrid from './layouts/GroupedFourRowGrid';
 import VerticalModeLayout from './layouts/VerticalModeLayout';
 
 /**
- * 事件列表组件 - 支持纵向和平铺两种展示模式
+ * 事件列表组件 - 支持纵向、平铺、主线三种展示模式
  * @param {Array} events - 当前页的事件列表（服务端已分页）
- * @param {Array} displayEvents - 累积显示的事件列表（平铺模式用）
+ * @param {Array} displayEvents - 累积显示的事件列表（平铺/主线模式用）
  * @param {Function} loadNextPage - 加载下一页（无限滚动）
  * @param {Function} loadPrevPage - 加载上一页（双向无限滚动）
- * @param {Function} onFourRowEventClick - 平铺模式事件点击回调（打开弹窗）
+ * @param {Function} onFourRowEventClick - 平铺/主线模式事件点击回调（打开弹窗）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
  * @param {string} borderColor - 边框颜色
@@ -24,11 +25,11 @@ import VerticalModeLayout from './layouts/VerticalModeLayout';
  * @param {Function} onPageChange - 页码改变回调
  * @param {boolean} loading - 全局加载状态
  * @param {Object} error - 错误状态
- * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'four-row'（平铺网格）
+ * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'four-row'（平铺网格）| 'mainline'（主线分组）
  * @param {boolean} hasMore - 是否还有更多数据
  * @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
  * @param {Function} onToggleFollow - 关注按钮回调
- * @param {React.Ref} virtualizedGridRef - VirtualizedFourRowGrid 的 ref（用于获取滚动位置）
+ * @param {React.Ref} virtualizedGridRef - VirtualizedFourRowGrid/GroupedFourRowGrid 的 ref（用于获取滚动位置）
  */
 const EventScrollList = React.memo(({
   events,
@@ -87,7 +88,7 @@ const EventScrollList = React.memo(({
       h="100%"
       pt={0}
       pb={4}
-      px={mode === 'four-row' ? 0 : { base: 0, md: 2 }}
+      px={mode === 'four-row' || mode === 'mainline' ? 0 : { base: 0, md: 2 }}
       position="relative"
       data-scroll-container="true"
       css={{
@@ -113,7 +114,7 @@ const EventScrollList = React.memo(({
     >
       {/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
       <VirtualizedFourRowGrid
-        ref={virtualizedGridRef}         // ⚡ 传递 ref（用于获取滚动位置）
+        ref={mode === 'four-row' ? virtualizedGridRef : null}
         display={mode === 'four-row' ? 'block' : 'none'}
         columnsPerRow={4}                // 每行显示4列
         events={displayEvents || events}  // 使用累积列表（如果有）
@@ -131,6 +132,25 @@ const EventScrollList = React.memo(({
         onRetry={handleRetry}            // 重试回调
       />
 
+      {/* 主线分组模式 - 按 lv2 概念分组 */}
+      <GroupedFourRowGrid
+        ref={mode === 'mainline' ? virtualizedGridRef : null}
+        display={mode === 'mainline' ? 'block' : 'none'}
+        columnsPerRow={4}
+        events={displayEvents || events}
+        selectedEvent={selectedEvent}
+        onEventSelect={onFourRowEventClick}
+        eventFollowStatus={eventFollowStatus}
+        onToggleFollow={onToggleFollow}
+        getTimelineBoxStyle={getTimelineBoxStyle}
+        borderColor={borderColor}
+        loadNextPage={loadNextPage}
+        hasMore={hasMore}
+        loading={loading}
+        error={error}
+        onRetry={handleRetry}
+      />
+
       {/* 纵向分栏模式 */}
       <VerticalModeLayout
         display={mode === 'vertical' ? 'flex' : 'none'}