From 2d48e08e43a58d729657c1e1b4345b3195d8c5c8 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Mon, 22 Dec 2025 09:52:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0Company=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84UI=E4=B8=BAFUI=E9=A3=8E=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../layouts/MainlineTimelineView.js           | 137 +++++++++++-------
 1 file changed, 87 insertions(+), 50 deletions(-)

diff --git a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
index 5a930114..7d0a55b8 100644
--- a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
+++ b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
@@ -1,5 +1,5 @@
 // src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
-// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向卡片布局）
+// 主线时间轴布局组件 - 按 lv2 概念分组展示事件（横向滚动布局）
 
 import React, {
   useState,
@@ -22,7 +22,6 @@ import {
   IconButton,
   useColorModeValue,
   Tooltip,
-  SimpleGrid,
 } from "@chakra-ui/react";
 import {
   ChevronDownIcon,
@@ -38,7 +37,7 @@ import { getApiBase } from "@utils/apiConfig";
  *
  * 功能：
  * 1. 调用 /api/events/mainline 获取预分组数据
- * 2. 按 lv2 概念分组展示，横向卡片布局
+ * 2. 按 lv2 概念分组展示，横向滚动布局
  * 3. 按事件数量从多到少排序
  * 4. 深色背景风格，与列表模式统一
  */
@@ -61,20 +60,19 @@ const MainlineTimelineViewComponent = forwardRef(
     const [mainlineData, setMainlineData] = useState(null);
     const [expandedGroups, setExpandedGroups] = useState({});
 
-    // 深色主题颜色 - 与列表模式统一
-    const containerBg = useColorModeValue("gray.100", "gray.900");
-    const cardBg = useColorModeValue("white", "gray.800");
-    const cardBorderColor = useColorModeValue("gray.200", "gray.700");
-    const headerBg = useColorModeValue("gray.50", "gray.750");
-    const headerHoverBg = useColorModeValue("gray.100", "gray.700");
-    const textColor = useColorModeValue("gray.800", "gray.100");
-    const secondaryTextColor = useColorModeValue("gray.600", "gray.400");
-    const timelineLineColor = useColorModeValue("blue.300", "blue.500");
-    const timelineDotBg = useColorModeValue("blue.500", "blue.400");
-    const scrollbarTrackBg = useColorModeValue("#e2e8f0", "#1a202c");
+    // 深色主题颜色
+    const containerBg = useColorModeValue("gray.50", "#1a1d24");
+    const cardBg = useColorModeValue("white", "#252a34");
+    const cardBorderColor = useColorModeValue("gray.200", "#3a3f4b");
+    const headerHoverBg = useColorModeValue("gray.100", "#2d323e");
+    const textColor = useColorModeValue("gray.800", "#e2e8f0");
+    const secondaryTextColor = useColorModeValue("gray.600", "#a0aec0");
+    const timelineLineColor = useColorModeValue("blue.300", "#4299e1");
+    const timelineDotBg = useColorModeValue("blue.500", "#63b3ed");
+    const scrollbarTrackBg = useColorModeValue("#e2e8f0", "#1a1d24");
     const scrollbarThumbBg = useColorModeValue("#a0aec0", "#4a5568");
     const scrollbarThumbHoverBg = useColorModeValue("#718096", "#718096");
-    const statBarBg = useColorModeValue("gray.200", "gray.800");
+    const statBarBg = useColorModeValue("gray.100", "#252a34");
 
     // 根据主线类型获取配色
     const getColorScheme = useCallback((lv2Name) => {
@@ -191,7 +189,7 @@ const MainlineTimelineViewComponent = forwardRef(
             mainlines: sortedMainlines,
           });
 
-          // 初始化展开状态（默认全部折叠，方便一目了然对比）
+          // 初始化展开状态（默认全部折叠）
           const initialExpanded = {};
           sortedMainlines.forEach((mainline) => {
             initialExpanded[mainline.lv2_id] = false;
@@ -304,24 +302,10 @@ const MainlineTimelineViewComponent = forwardRef(
     return (
       <Box
         display={display}
-        overflowY="auto"
         h="100%"
         w="100%"
         bg={containerBg}
-        css={{
-          "&::-webkit-scrollbar": { width: "8px" },
-          "&::-webkit-scrollbar-track": {
-            background: scrollbarTrackBg,
-          },
-          "&::-webkit-scrollbar-thumb": {
-            background: scrollbarThumbBg,
-            borderRadius: "4px",
-          },
-          "&::-webkit-scrollbar-thumb:hover": {
-            background: scrollbarThumbHoverBg,
-          },
-          scrollBehavior: "smooth",
-        }}
+        overflow="hidden"
       >
         {/* 顶部统计栏 */}
         <Flex
@@ -332,9 +316,6 @@ const MainlineTimelineViewComponent = forwardRef(
           bg={statBarBg}
           borderBottomWidth="1px"
           borderBottomColor={cardBorderColor}
-          position="sticky"
-          top={0}
-          zIndex={10}
         >
           <HStack spacing={4}>
             <HStack spacing={2}>
@@ -387,9 +368,32 @@ const MainlineTimelineViewComponent = forwardRef(
           </HStack>
         </Flex>
 
-        {/* 主线卡片网格 - 横向布局 */}
-        <Box p={3}>
-          <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={3}>
+        {/* 主线卡片横向滚动容器 */}
+        <Box
+          overflowX="auto"
+          overflowY="hidden"
+          h="calc(100% - 44px)"
+          css={{
+            "&::-webkit-scrollbar": { height: "8px" },
+            "&::-webkit-scrollbar-track": {
+              background: scrollbarTrackBg,
+            },
+            "&::-webkit-scrollbar-thumb": {
+              background: scrollbarThumbBg,
+              borderRadius: "4px",
+            },
+            "&::-webkit-scrollbar-thumb:hover": {
+              background: scrollbarThumbHoverBg,
+            },
+          }}
+        >
+          <HStack
+            spacing={3}
+            p={3}
+            align="stretch"
+            h="100%"
+            minW="max-content"
+          >
             {mainlines.map((mainline) => {
               const colorScheme = getColorScheme(mainline.lv2_name);
               const isExpanded = expandedGroups[mainline.lv2_id];
@@ -401,13 +405,17 @@ const MainlineTimelineViewComponent = forwardRef(
                   borderRadius="lg"
                   borderWidth="1px"
                   borderColor={cardBorderColor}
-                  borderLeftWidth="4px"
-                  borderLeftColor={`${colorScheme}.500`}
-                  overflow="hidden"
-                  transition="all 0.2s"
+                  borderTopWidth="3px"
+                  borderTopColor={`${colorScheme}.500`}
+                  minW={isExpanded ? "320px" : "200px"}
+                  maxW={isExpanded ? "380px" : "240px"}
+                  h="100%"
+                  display="flex"
+                  flexDirection="column"
+                  transition="all 0.3s ease"
+                  flexShrink={0}
                   _hover={{
                     borderColor: `${colorScheme}.400`,
-                    transform: "translateY(-1px)",
                     boxShadow: "lg"
                   }}
                 >
@@ -421,6 +429,9 @@ const MainlineTimelineViewComponent = forwardRef(
                     onClick={() => toggleGroup(mainline.lv2_id)}
                     _hover={{ bg: headerHoverBg }}
                     transition="all 0.15s"
+                    borderBottomWidth="1px"
+                    borderBottomColor={cardBorderColor}
+                    flexShrink={0}
                   >
                     <VStack align="start" spacing={0} flex={1} minW={0}>
                       <HStack spacing={2} w="100%">
@@ -458,14 +469,12 @@ const MainlineTimelineViewComponent = forwardRef(
                     />
                   </Flex>
 
-                  {/* 展开的事件列表 */}
-                  <Collapse in={isExpanded} animateOpacity>
+                  {/* 事件列表 - 可滚动到底 */}
+                  <Collapse in={isExpanded} animateOpacity style={{ flex: 1, overflow: 'hidden' }}>
                     <Box
                       px={3}
                       py={2}
-                      borderTopWidth="1px"
-                      borderTopColor={cardBorderColor}
-                      maxH="400px"
+                      h="100%"
                       overflowY="auto"
                       position="relative"
                       css={{
@@ -499,8 +508,7 @@ const MainlineTimelineViewComponent = forwardRef(
                             <Box
                               position="absolute"
                               left="-19px"
-                              top="50%"
-                              transform="translateY(-50%)"
+                              top="12px"
                               w="8px"
                               h="8px"
                               borderRadius="full"
@@ -539,10 +547,39 @@ const MainlineTimelineViewComponent = forwardRef(
                       </VStack>
                     </Box>
                   </Collapse>
+
+                  {/* 折叠时显示简要信息 */}
+                  {!isExpanded && (
+                    <Box px={3} py={2} flex={1} overflow="hidden">
+                      <VStack spacing={1} align="stretch">
+                        {mainline.events.slice(0, 3).map((event) => (
+                          <Text
+                            key={event.id}
+                            fontSize="xs"
+                            color={secondaryTextColor}
+                            noOfLines={1}
+                            cursor="pointer"
+                            _hover={{ color: textColor }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              onEventSelect?.(event);
+                            }}
+                          >
+                            • {event.title}
+                          </Text>
+                        ))}
+                        {mainline.events.length > 3 && (
+                          <Text fontSize="xs" color={secondaryTextColor}>
+                            ... 还有 {mainline.events.length - 3} 条
+                          </Text>
+                        )}
+                      </VStack>
+                    </Box>
+                  )}
                 </Box>
               );
             })}
-          </SimpleGrid>
+          </HStack>
         </Box>
       </Box>
     );