更新Company页面的UI为FUI风格

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

@@ -377,14 +377,18 @@ const [currentMode, setCurrentMode] = useState('vertical');
     // 添加防抖：如果已经初始化，不再执行
     if (hasInitialized.current) return;
 
-    // mainline 模式使用 four-row 的 API 模式（共用数据）
-    const apiMode = mode === DISPLAY_MODES.MAINLINE ? DISPLAY_MODES.FOUR_ROW : mode;
+    // ⚡ mainline 模式使用独立 API，不需要通过 Redux 获取数据
+    if (mode === DISPLAY_MODES.MAINLINE) {
+      hasInitialized.current = true;
+      console.log('%c🚀 [初始加载] 主线模式 - 组件自己调用 /api/events/mainline', 'color: #10B981; font-weight: bold;');
+      return;
+    }
 
     // ⚡ 始终获取最新数据，确保用户每次进入页面看到最新事件
     hasInitialized.current = true;
-    console.log('%c🚀 [初始加载] 获取最新事件数据', 'color: #10B981; font-weight: bold;', { mode, apiMode, pageSize });
+    console.log('%c🚀 [初始加载] 获取最新事件数据', 'color: #10B981; font-weight: bold;', { mode, pageSize });
     dispatch(fetchDynamicNews({
-      mode: apiMode,  // 传递 API 模式（mainline 映射为 four-row）
+      mode,
       per_page: pageSize,
       pageSize: pageSize,  // 传递 pageSize 确保索引计算一致
       clearCache: true,
@@ -412,14 +416,17 @@ const [currentMode, setCurrentMode] = useState('vertical');
       return;
     }
 
-    // mainline 模式使用 four-row 的 API 模式（共用数据）
-    const apiMode = mode === DISPLAY_MODES.MAINLINE ? DISPLAY_MODES.FOUR_ROW : mode;
+    // ⚡ mainline 模式使用独立 API，筛选条件变化由 MainlineTimelineView 自己监听
+    if (mode === DISPLAY_MODES.MAINLINE) {
+      console.log('%c🔍 [筛选] 主线模式 - 筛选条件变化由组件自己处理', 'color: #8B5CF6; font-weight: bold;', { filters });
+      return;
+    }
 
-    console.log('%c🔍 [筛选] 筛选条件改变，重新请求数据', 'color: #8B5CF6; font-weight: bold;', { filters, mode, apiMode });
+    console.log('%c🔍 [筛选] 筛选条件改变，重新请求数据', 'color: #8B5CF6; font-weight: bold;', { filters, mode });
 
     // 筛选条件改变时，清空对应模式的缓存并从第1页开始加载
     dispatch(fetchDynamicNews({
-      mode: apiMode,  // 传递 API 模式（mainline 映射为 four-row）
+      mode,
       per_page: pageSize,
       pageSize: pageSize,
       clearCache: true,  // 清空缓存
@@ -442,6 +449,12 @@ const [currentMode, setCurrentMode] = useState('vertical');
 
   // 监听模式切换 - 如果新模式数据为空，请求数据
   useEffect(() => {
+    // ⚡ mainline 模式使用独立 API，不需要通过 Redux 加载数据
+    if (mode === DISPLAY_MODES.MAINLINE) {
+      console.log('%c🔄 [模式切换] 主线模式 - 由 MainlineTimelineView 组件自己加载数据', 'color: #8B5CF6; font-weight: bold;');
+      return;
+    }
+
     const isDataEmpty = currentMode === 'vertical'
       ? Object.keys(allCachedEventsByPage || {}).length === 0
       : (allCachedEvents?.length || 0) === 0;
@@ -449,20 +462,16 @@ const [currentMode, setCurrentMode] = useState('vertical');
     if (hasInitialized.current && isDataEmpty) {
       console.log(`%c🔄 [模式切换] ${mode} 模式数据为空，开始加载`, 'color: #8B5CF6; font-weight: bold;');
 
-      // 🔧 根据 mode 直接计算 per_page，避免使用可能过时的 pageSize prop
-      // mainline 模式复用 four-row 的分页大小
-      const modePageSize = (mode === DISPLAY_MODES.FOUR_ROW || mode === DISPLAY_MODES.MAINLINE)
+      // 🔧 根据 mode 直接计算 per_page
+      const modePageSize = mode === DISPLAY_MODES.FOUR_ROW
         ? PAGINATION_CONFIG.FOUR_ROW_PAGE_SIZE  // 30
         : PAGINATION_CONFIG.VERTICAL_PAGE_SIZE;  // 10
 
-      // mainline 模式使用 four-row 的 API 模式（共用数据）
-      const apiMode = mode === DISPLAY_MODES.MAINLINE ? DISPLAY_MODES.FOUR_ROW : mode;
-
-      console.log(`%c   计算的 per_page: ${modePageSize}, apiMode: ${apiMode} (mode: ${mode})`, 'color: #8B5CF6;');
+      console.log(`%c   计算的 per_page: ${modePageSize} (mode: ${mode})`, 'color: #8B5CF6;');
 
       dispatch(fetchDynamicNews({
-        mode: apiMode,  // 使用映射后的 API 模式
-        per_page: modePageSize,  // 使用计算的值，不是 pageSize prop
+        mode,
+        per_page: modePageSize,
         pageSize: modePageSize,
         clearCache: true,
         ...filters,  // 先展开筛选条件
@@ -662,6 +671,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
           <EventScrollList
             events={currentPageEvents}
             displayEvents={displayEvents}              // 累积显示的事件列表（平铺模式）
+            filters={filters}                          // 筛选条件（主线模式用）
             loadNextPage={loadNextPage}                // 加载下一页
             loadPrevPage={loadPrevPage}                // 加载上一页
             onFourRowEventClick={handleFourRowEventClick}  // 四排模式事件点击

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

@@ -1,19 +1,17 @@
 // src/views/Community/components/DynamicNews/EventScrollList.js
 // 横向滚动事件列表组件
 
-import React, { useRef, useCallback } from 'react';
-import {
-  Box,
-  useColorModeValue
-} from '@chakra-ui/react';
-import VirtualizedFourRowGrid from './layouts/VirtualizedFourRowGrid';
-import GroupedFourRowGrid from './layouts/GroupedFourRowGrid';
-import VerticalModeLayout from './layouts/VerticalModeLayout';
+import React, { useRef, useCallback } from "react";
+import { Box, useColorModeValue } from "@chakra-ui/react";
+import VirtualizedFourRowGrid from "./layouts/VirtualizedFourRowGrid";
+import MainlineTimelineView from "./layouts/MainlineTimelineView";
+import VerticalModeLayout from "./layouts/VerticalModeLayout";
 
 /**
  * 事件列表组件 - 支持纵向、平铺、主线三种展示模式
  * @param {Array} events - 当前页的事件列表（服务端已分页）
- * @param {Array} displayEvents - 累积显示的事件列表（平铺/主线模式用）
+ * @param {Array} displayEvents - 累积显示的事件列表（平铺模式用）
+ * @param {Object} filters - 筛选条件（主线模式用）
  * @param {Function} loadNextPage - 加载下一页（无限滚动）
  * @param {Function} loadPrevPage - 加载上一页（双向无限滚动）
  * @param {Function} onFourRowEventClick - 平铺/主线模式事件点击回调（打开弹窗）
@@ -25,148 +23,147 @@ import VerticalModeLayout from './layouts/VerticalModeLayout';
  * @param {Function} onPageChange - 页码改变回调
  * @param {boolean} loading - 全局加载状态
  * @param {Object} error - 错误状态
- * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'four-row'（平铺网格）| 'mainline'（主线分组）
+ * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'four-row'（平铺网格）| 'mainline'（主线时间轴）
  * @param {boolean} hasMore - 是否还有更多数据
  * @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
  * @param {Function} onToggleFollow - 关注按钮回调
- * @param {React.Ref} virtualizedGridRef - VirtualizedFourRowGrid/GroupedFourRowGrid 的 ref（用于获取滚动位置）
+ * @param {React.Ref} virtualizedGridRef - VirtualizedFourRowGrid/MainlineTimelineView 的 ref
  */
-const EventScrollList = React.memo(({
-  events,
-  displayEvents,
-  loadNextPage,
-  loadPrevPage,
-  onFourRowEventClick,
-  selectedEvent,
-  onEventSelect,
-  borderColor,
-  currentPage,
-  totalPages,
-  onPageChange,
-  loading = false,
-  error,
-  mode = 'vertical',
-  hasMore = true,
-  eventFollowStatus = {},
-  onToggleFollow,
-  virtualizedGridRef
-}) => {
-  const scrollContainerRef = useRef(null);
+const EventScrollList = React.memo(
+  ({
+    events,
+    displayEvents,
+    filters = {},
+    loadNextPage,
+    loadPrevPage,
+    onFourRowEventClick,
+    selectedEvent,
+    onEventSelect,
+    borderColor,
+    currentPage,
+    totalPages,
+    onPageChange,
+    loading = false,
+    error,
+    mode = "vertical",
+    hasMore = true,
+    eventFollowStatus = {},
+    onToggleFollow,
+    virtualizedGridRef,
+  }) => {
+    const scrollContainerRef = useRef(null);
 
-  // 所有 useColorModeValue 必须在组件顶层调用（不能在条件渲染中）
-  const timelineBg = useColorModeValue('gray.50', 'gray.700');
-  const timelineBorderColor = useColorModeValue('gray.400', 'gray.500');
-  const timelineTextColor = useColorModeValue('blue.600', 'blue.400');
+    // 所有 useColorModeValue 必须在组件顶层调用（不能在条件渲染中）
+    const timelineBg = useColorModeValue("gray.50", "gray.700");
+    const timelineBorderColor = useColorModeValue("gray.400", "gray.500");
+    const timelineTextColor = useColorModeValue("blue.600", "blue.400");
 
-  // 滚动条颜色
-  const scrollbarTrackBg = useColorModeValue('#f1f1f1', '#2D3748');
-  const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
-  const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
+    // 滚动条颜色
+    const scrollbarTrackBg = useColorModeValue("#f1f1f1", "#2D3748");
+    const scrollbarThumbBg = useColorModeValue("#888", "#4A5568");
+    const scrollbarThumbHoverBg = useColorModeValue("#555", "#718096");
 
-  const getTimelineBoxStyle = () => {
-    return {
-      bg: timelineBg,
-      borderColor: timelineBorderColor,
-      borderWidth: '2px',
-      textColor: timelineTextColor,
-      boxShadow: 'sm',
+    const getTimelineBoxStyle = () => {
+      return {
+        bg: timelineBg,
+        borderColor: timelineBorderColor,
+        borderWidth: "2px",
+        textColor: timelineTextColor,
+        boxShadow: "sm",
+      };
     };
-  };
 
-  // 重试函数
-  const handleRetry = useCallback(() => {
-    if (onPageChange) {
-      onPageChange(currentPage);
+    // 重试函数
+    const handleRetry = useCallback(() => {
+      if (onPageChange) {
+        onPageChange(currentPage);
+      }
+    }, [onPageChange, currentPage]);
+
+    {
+      /* 事件卡片容器 */
     }
-  }, [onPageChange, currentPage]);
+    return (
+      <Box
+        ref={scrollContainerRef}
+        overflowX="hidden"
+        h="100%"
+        pt={0}
+        pb={4}
+        px={mode === "four-row" || mode === "mainline" ? 0 : { base: 0, md: 2 }}
+        position="relative"
+        data-scroll-container="true"
+        css={{
+          // 统一滚动条样式（支持横向和纵向）
+          "&::-webkit-scrollbar": {
+            width: "1px",
+            height: "1px",
+          },
+          "&::-webkit-scrollbar-track": {
+            background: scrollbarTrackBg,
+            borderRadius: "10px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: scrollbarThumbBg,
+            borderRadius: "10px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: scrollbarThumbHoverBg,
+          },
+          scrollBehavior: "smooth",
+          WebkitOverflowScrolling: "touch",
+        }}
+      >
+        {/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
+        <VirtualizedFourRowGrid
+          ref={mode === "four-row" ? virtualizedGridRef : null}
+          display={mode === "four-row" ? "block" : "none"}
+          columnsPerRow={4} // 每行显示4列
+          events={displayEvents || events} // 使用累积列表（如果有）
+          selectedEvent={selectedEvent}
+          onEventSelect={onFourRowEventClick} // 四排模式点击打开弹窗
+          eventFollowStatus={eventFollowStatus}
+          onToggleFollow={onToggleFollow}
+          getTimelineBoxStyle={getTimelineBoxStyle}
+          borderColor={borderColor}
+          loadNextPage={loadNextPage} // 加载下一页
+          loadPrevPage={loadPrevPage} // 加载上一页（双向滚动）
+          hasMore={hasMore} // 是否还有更多数据
+          loading={loading} // 加载状态
+          error={error} // 错误状态
+          onRetry={handleRetry} // 重试回调
+        />
 
-  {/* 事件卡片容器 */}
-  return (
-    <Box
-      ref={scrollContainerRef}
-      overflowX="hidden"
-      h="100%"
-      pt={0}
-      pb={4}
-      px={mode === 'four-row' || mode === 'mainline' ? 0 : { base: 0, md: 2 }}
-      position="relative"
-      data-scroll-container="true"
-      css={{
-        // 统一滚动条样式（支持横向和纵向）
-        '&::-webkit-scrollbar': {
-          width: '1px',
-          height: '1px',
-        },
-        '&::-webkit-scrollbar-track': {
-          background: scrollbarTrackBg,
-          borderRadius: '10px',
-        },
-        '&::-webkit-scrollbar-thumb': {
-          background: scrollbarThumbBg,
-          borderRadius: '10px',
-        },
-        '&::-webkit-scrollbar-thumb:hover': {
-          background: scrollbarThumbHoverBg,
-        },
-        scrollBehavior: 'smooth',
-        WebkitOverflowScrolling: 'touch',
-      }}
-    >
-      {/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
-      <VirtualizedFourRowGrid
-        ref={mode === 'four-row' ? virtualizedGridRef : null}
-        display={mode === 'four-row' ? 'block' : 'none'}
-        columnsPerRow={4}                // 每行显示4列
-        events={displayEvents || events}  // 使用累积列表（如果有）
-        selectedEvent={selectedEvent}
-        onEventSelect={onFourRowEventClick}  // 四排模式点击打开弹窗
-        eventFollowStatus={eventFollowStatus}
-        onToggleFollow={onToggleFollow}
-        getTimelineBoxStyle={getTimelineBoxStyle}
-        borderColor={borderColor}
-        loadNextPage={loadNextPage}      // 加载下一页
-        loadPrevPage={loadPrevPage}      // 加载上一页（双向滚动）
-        hasMore={hasMore}                // 是否还有更多数据
-        loading={loading}                // 加载状态
-        error={error}                    // 错误状态
-        onRetry={handleRetry}            // 重试回调
-      />
+        {/* 主线时间轴模式 - 按 lv2 概念分组，调用独立 API */}
+        <MainlineTimelineView
+          ref={mode === "mainline" ? virtualizedGridRef : null}
+          display={mode === "mainline" ? "block" : "none"}
+          filters={filters}
+          columnsPerRow={3}
+          selectedEvent={selectedEvent}
+          onEventSelect={onFourRowEventClick}
+          eventFollowStatus={eventFollowStatus}
+          onToggleFollow={onToggleFollow}
+          borderColor={borderColor}
+        />
 
-      {/* 主线分组模式 - 按 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'}
-        events={events}
-        selectedEvent={selectedEvent}
-        onEventSelect={onEventSelect}
-        eventFollowStatus={eventFollowStatus}
-        onToggleFollow={onToggleFollow}
-        getTimelineBoxStyle={getTimelineBoxStyle}
-        borderColor={borderColor}
-        currentPage={currentPage}
-        totalPages={totalPages}
-        onPageChange={onPageChange}
-      />
-    </Box>
-  );
-});
+        {/* 纵向分栏模式 */}
+        <VerticalModeLayout
+          display={mode === "vertical" ? "flex" : "none"}
+          events={events}
+          selectedEvent={selectedEvent}
+          onEventSelect={onEventSelect}
+          eventFollowStatus={eventFollowStatus}
+          onToggleFollow={onToggleFollow}
+          getTimelineBoxStyle={getTimelineBoxStyle}
+          borderColor={borderColor}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={onPageChange}
+        />
+      </Box>
+    );
+  }
+);
 
 export default EventScrollList;

src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js

@@ -0,0 +1,537 @@
+// src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
+// 主线时间轴布局组件 - 按 lv2 概念分组展示事件
+
+import React, {
+  useState,
+  useEffect,
+  forwardRef,
+  useImperativeHandle,
+  useCallback,
+} from "react";
+import {
+  Box,
+  VStack,
+  HStack,
+  Text,
+  Badge,
+  Flex,
+  Icon,
+  Collapse,
+  Spinner,
+  Center,
+  IconButton,
+  useColorModeValue,
+  Tooltip,
+  Grid,
+} from "@chakra-ui/react";
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  RepeatIcon,
+  TimeIcon,
+} from "@chakra-ui/icons";
+import { FiTrendingUp, FiClock, FiZap } from "react-icons/fi";
+import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
+import { getApiBase } from "@utils/apiConfig";
+
+/**
+ * 主线时间轴布局组件
+ *
+ * 功能：
+ * 1. 调用 /api/events/mainline 获取预分组数据
+ * 2. 按 lv2 概念分组展示，时间轴样式
+ * 3. 不使用无限滚动，一次性加载全部数据
+ */
+const MainlineTimelineViewComponent = forwardRef(
+  (
+    {
+      display = "block",
+      filters = {},
+      selectedEvent,
+      onEventSelect,
+      eventFollowStatus = {},
+      onToggleFollow,
+      borderColor,
+      columnsPerRow = 3,
+    },
+    ref
+  ) => {
+    // 状态
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [mainlineData, setMainlineData] = useState(null);
+    const [expandedGroups, setExpandedGroups] = useState({});
+
+    // 主题颜色
+    const bgColor = useColorModeValue("white", "gray.800");
+    const headerBg = useColorModeValue("gray.50", "gray.700");
+    const headerHoverBg = useColorModeValue("gray.100", "gray.600");
+    const textColor = useColorModeValue("gray.700", "gray.200");
+    const secondaryTextColor = useColorModeValue("gray.500", "gray.400");
+    const timelineBorderColor = useColorModeValue("gray.200", "gray.600");
+    const timelineLineColor = useColorModeValue("blue.200", "blue.600");
+    const scrollbarTrackBg = useColorModeValue("#f1f1f1", "#2D3748");
+    const scrollbarThumbBg = useColorModeValue("#888", "#4A5568");
+    const scrollbarThumbHoverBg = useColorModeValue("#555", "#718096");
+
+    // 根据主线类型获取配色
+    const getColorScheme = useCallback((lv2Name) => {
+      if (!lv2Name) return "gray";
+      const name = lv2Name.toLowerCase();
+
+      if (
+        name.includes("ai") ||
+        name.includes("人工智能") ||
+        name.includes("算力") ||
+        name.includes("大模型")
+      )
+        return "purple";
+      if (
+        name.includes("半导体") ||
+        name.includes("芯片") ||
+        name.includes("光刻")
+      )
+        return "blue";
+      if (name.includes("机器人") || name.includes("人形")) return "pink";
+      if (
+        name.includes("消费电子") ||
+        name.includes("手机") ||
+        name.includes("xr")
+      )
+        return "cyan";
+      if (
+        name.includes("汽车") ||
+        name.includes("驾驶") ||
+        name.includes("新能源车")
+      )
+        return "teal";
+      if (
+        name.includes("新能源") ||
+        name.includes("电力") ||
+        name.includes("光伏") ||
+        name.includes("储能")
+      )
+        return "green";
+      if (
+        name.includes("低空") ||
+        name.includes("航天") ||
+        name.includes("卫星")
+      )
+        return "orange";
+      if (name.includes("军工") || name.includes("国防")) return "red";
+      if (
+        name.includes("医药") ||
+        name.includes("医疗") ||
+        name.includes("生物")
+      )
+        return "messenger";
+      if (
+        name.includes("消费") ||
+        name.includes("食品") ||
+        name.includes("白酒")
+      )
+        return "yellow";
+      if (
+        name.includes("煤炭") ||
+        name.includes("石油") ||
+        name.includes("钢铁")
+      )
+        return "blackAlpha";
+      if (
+        name.includes("金融") ||
+        name.includes("银行") ||
+        name.includes("券商")
+      )
+        return "linkedin";
+      return "gray";
+    }, []);
+
+    // 加载主线数据
+    const fetchMainlineData = useCallback(async () => {
+      if (display === "none") return;
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const apiBase = getApiBase();
+        const params = new URLSearchParams();
+
+        // 添加筛选参数
+        if (filters.recent_days)
+          params.append("recent_days", filters.recent_days);
+        if (filters.importance && filters.importance !== "all")
+          params.append("importance", filters.importance);
+
+        const url = `${apiBase}/api/events/mainline?${params.toString()}`;
+        console.log("[MainlineTimelineView] 🔄 请求主线数据:", url);
+
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+        console.log("[MainlineTimelineView] 📦 响应数据:", {
+          success: result.success,
+          mainlineCount: result.data?.mainlines?.length,
+          totalEvents: result.data?.total_events,
+        });
+
+        if (result.success) {
+          setMainlineData(result.data);
+
+          // 初始化展开状态（默认展开前5个）
+          const initialExpanded = {};
+          result.data.mainlines?.slice(0, 5).forEach((mainline) => {
+            initialExpanded[mainline.lv2_id] = true;
+          });
+          setExpandedGroups(initialExpanded);
+        } else {
+          throw new Error(result.error || "获取数据失败");
+        }
+      } catch (err) {
+        console.error("[MainlineTimelineView] ❌ 请求失败:", err);
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }, [display, filters.recent_days, filters.importance]);
+
+    // 初始加载 & 筛选变化时刷新
+    useEffect(() => {
+      fetchMainlineData();
+    }, [fetchMainlineData]);
+
+    // 暴露方法给父组件
+    useImperativeHandle(
+      ref,
+      () => ({
+        refresh: fetchMainlineData,
+        getScrollPosition: () => null, // 不使用滚动位置判断
+      }),
+      [fetchMainlineData]
+    );
+
+    // 切换分组展开/折叠
+    const toggleGroup = useCallback((lv2Id) => {
+      setExpandedGroups((prev) => ({
+        ...prev,
+        [lv2Id]: !prev[lv2Id],
+      }));
+    }, []);
+
+    // 全部展开/折叠
+    const toggleAll = useCallback(
+      (expand) => {
+        if (!mainlineData?.mainlines) return;
+        const newState = {};
+        mainlineData.mainlines.forEach((mainline) => {
+          newState[mainline.lv2_id] = expand;
+        });
+        setExpandedGroups(newState);
+      },
+      [mainlineData]
+    );
+
+    // 渲染加载状态
+    if (loading) {
+      return (
+        <Box display={display} p={8}>
+          <Center h="400px">
+            <VStack spacing={4}>
+              <Spinner size="xl" color="blue.500" thickness="4px" />
+              <Text color={secondaryTextColor}>正在加载主线数据...</Text>
+            </VStack>
+          </Center>
+        </Box>
+      );
+    }
+
+    // 渲染错误状态
+    if (error) {
+      return (
+        <Box display={display} p={8}>
+          <Center h="400px">
+            <VStack spacing={4}>
+              <Text color="red.500">加载失败: {error}</Text>
+              <IconButton
+                icon={<RepeatIcon />}
+                colorScheme="blue"
+                onClick={fetchMainlineData}
+                aria-label="重试"
+              />
+            </VStack>
+          </Center>
+        </Box>
+      );
+    }
+
+    // 渲染空状态
+    if (!mainlineData?.mainlines?.length) {
+      return (
+        <Box display={display} p={8}>
+          <Center h="400px">
+            <VStack spacing={4}>
+              <Icon as={FiZap} boxSize={12} color="gray.400" />
+              <Text color={secondaryTextColor}>暂无主线数据</Text>
+              <Text fontSize="sm" color={secondaryTextColor}>
+                尝试调整筛选条件
+              </Text>
+            </VStack>
+          </Center>
+        </Box>
+      );
+    }
+
+    const {
+      mainlines,
+      total_events,
+      mainline_count,
+      ungrouped_count,
+    } = mainlineData;
+
+    return (
+      <Box
+        display={display}
+        overflowY="auto"
+        minH="600px"
+        maxH="800px"
+        w="100%"
+        bg={bgColor}
+        borderRadius="md"
+        css={{
+          "&::-webkit-scrollbar": { width: "6px" },
+          "&::-webkit-scrollbar-track": {
+            background: scrollbarTrackBg,
+            borderRadius: "10px",
+          },
+          "&::-webkit-scrollbar-thumb": {
+            background: scrollbarThumbBg,
+            borderRadius: "10px",
+          },
+          "&::-webkit-scrollbar-thumb:hover": {
+            background: scrollbarThumbHoverBg,
+          },
+          scrollBehavior: "smooth",
+        }}
+      >
+        {/* 顶部统计信息 */}
+        <Flex
+          justify="space-between"
+          align="center"
+          px={4}
+          py={3}
+          borderBottomWidth="1px"
+          borderColor={timelineBorderColor}
+          position="sticky"
+          top={0}
+          bg={bgColor}
+          zIndex={10}
+        >
+          <HStack spacing={4}>
+            <HStack spacing={2}>
+              <Icon as={FiTrendingUp} color="blue.500" />
+              <Text fontWeight="semibold" color={textColor}>
+                {mainline_count} 条主线
+              </Text>
+            </HStack>
+            <HStack spacing={2}>
+              <Icon as={FiClock} color="green.500" />
+              <Text fontSize="sm" color={secondaryTextColor}>
+                {total_events} 个事件
+              </Text>
+            </HStack>
+            {ungrouped_count > 0 && (
+              <Text fontSize="sm" color="orange.500">
+                ({ungrouped_count} 个未归类)
+              </Text>
+            )}
+          </HStack>
+
+          <HStack spacing={2}>
+            <Tooltip label="全部展开">
+              <IconButton
+                icon={<ChevronDownIcon />}
+                size="sm"
+                variant="ghost"
+                onClick={() => toggleAll(true)}
+                aria-label="全部展开"
+              />
+            </Tooltip>
+            <Tooltip label="全部折叠">
+              <IconButton
+                icon={<ChevronRightIcon />}
+                size="sm"
+                variant="ghost"
+                onClick={() => toggleAll(false)}
+                aria-label="全部折叠"
+              />
+            </Tooltip>
+            <Tooltip label="刷新">
+              <IconButton
+                icon={<RepeatIcon />}
+                size="sm"
+                variant="ghost"
+                onClick={fetchMainlineData}
+                aria-label="刷新"
+              />
+            </Tooltip>
+          </HStack>
+        </Flex>
+
+        {/* 主线列表 - 时间轴样式 */}
+        <Box position="relative" px={4} py={4}>
+          {/* 时间轴垂直线 */}
+          <Box
+            position="absolute"
+            left="28px"
+            top="0"
+            bottom="0"
+            w="2px"
+            bg={timelineLineColor}
+            opacity={0.5}
+          />
+
+          <VStack spacing={4} align="stretch">
+            {mainlines.map((mainline, index) => {
+              const colorScheme = getColorScheme(mainline.lv2_name);
+              const isExpanded = expandedGroups[mainline.lv2_id];
+
+              return (
+                <Box key={mainline.lv2_id} position="relative" pl={10}>
+                  {/* 时间轴圆点 */}
+                  <Box
+                    position="absolute"
+                    left="22px"
+                    top="16px"
+                    w="14px"
+                    h="14px"
+                    borderRadius="full"
+                    bg={`${colorScheme}.500`}
+                    border="3px solid"
+                    borderColor={bgColor}
+                    boxShadow="0 0 0 2px"
+                    sx={{ boxShadowColor: `${colorScheme}.200` }}
+                    zIndex={2}
+                  />
+
+                  {/* 分组头部 */}
+                  <Flex
+                    align="center"
+                    justify="space-between"
+                    px={4}
+                    py={3}
+                    bg={headerBg}
+                    borderRadius="lg"
+                    borderWidth="1px"
+                    borderColor={timelineBorderColor}
+                    cursor="pointer"
+                    _hover={{ bg: headerHoverBg }}
+                    onClick={() => toggleGroup(mainline.lv2_id)}
+                    transition="all 0.2s"
+                    boxShadow="sm"
+                  >
+                    <HStack spacing={3}>
+                      <Icon
+                        as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
+                        boxSize={5}
+                        color={textColor}
+                        transition="transform 0.2s"
+                      />
+                      <VStack align="start" spacing={0}>
+                        <HStack spacing={2}>
+                          <Text
+                            fontWeight="bold"
+                            fontSize="md"
+                            color={textColor}
+                          >
+                            {mainline.lv2_name}
+                          </Text>
+                          <Badge
+                            colorScheme={colorScheme}
+                            fontSize="xs"
+                            borderRadius="full"
+                            px={2}
+                          >
+                            {mainline.event_count} 条
+                          </Badge>
+                        </HStack>
+                        <Text fontSize="xs" color={secondaryTextColor}>
+                          {mainline.lv1_name}
+                        </Text>
+                      </VStack>
+                    </HStack>
+
+                    <HStack spacing={2}>
+                      <Icon
+                        as={TimeIcon}
+                        color={secondaryTextColor}
+                        boxSize={3}
+                      />
+                      <Text fontSize="xs" color={secondaryTextColor}>
+                        #{index + 1}
+                      </Text>
+                    </HStack>
+                  </Flex>
+
+                  {/* 分组内容 */}
+                  <Collapse in={isExpanded} animateOpacity>
+                    <Box
+                      mt={3}
+                      pl={2}
+                      borderLeftWidth="2px"
+                      borderLeftColor={`${colorScheme}.200`}
+                      borderLeftStyle="dashed"
+                    >
+                      <Grid
+                        templateColumns={`repeat(${columnsPerRow}, 1fr)`}
+                        gap={3}
+                        w="100%"
+                      >
+                        {mainline.events.map((event, eventIndex) => (
+                          <Box key={event.id} w="100%" minW={0}>
+                            <DynamicNewsEventCard
+                              event={event}
+                              index={eventIndex}
+                              isFollowing={
+                                eventFollowStatus[event.id]?.isFollowing ||
+                                false
+                              }
+                              followerCount={
+                                eventFollowStatus[event.id]?.followerCount ||
+                                event.follower_count ||
+                                0
+                              }
+                              isSelected={selectedEvent?.id === event.id}
+                              onEventClick={(clickedEvent) => {
+                                onEventSelect?.(clickedEvent);
+                              }}
+                              onTitleClick={(e) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                onEventSelect?.(event);
+                              }}
+                              onToggleFollow={() => onToggleFollow?.(event.id)}
+                              borderColor={borderColor}
+                            />
+                          </Box>
+                        ))}
+                      </Grid>
+                    </Box>
+                  </Collapse>
+                </Box>
+              );
+            })}
+          </VStack>
+        </Box>
+      </Box>
+    );
+  }
+);
+
+MainlineTimelineViewComponent.displayName = "MainlineTimelineView";
+
+const MainlineTimelineView = React.memo(MainlineTimelineViewComponent);
+
+export default MainlineTimelineView;