更新Company页面的UI为FUI风格

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,11 +22,11 @@ import {
   IconButton,
   useColorModeValue,
   Tooltip,
-  Grid,
+  SimpleGrid,
 } from "@chakra-ui/react";
 import {
   ChevronDownIcon,
-  ChevronRightIcon,
+  ChevronUpIcon,
   RepeatIcon,
 } from "@chakra-ui/icons";
 import { FiTrendingUp, FiZap } from "react-icons/fi";
@@ -38,8 +38,9 @@ import { getApiBase } from "@utils/apiConfig";
  *
  * 功能：
  * 1. 调用 /api/events/mainline 获取预分组数据
- * 2. 按 lv2 概念分组展示，卡片式布局 + 内部时间轴
+ * 2. 按 lv2 概念分组展示，横向卡片布局
  * 3. 按事件数量从多到少排序
+ * 4. 深色背景风格，与列表模式统一
  */
 const MainlineTimelineViewComponent = forwardRef(
   (
@@ -51,7 +52,6 @@ const MainlineTimelineViewComponent = forwardRef(
       eventFollowStatus = {},
       onToggleFollow,
       borderColor,
-      columnsPerRow = 3,
     },
     ref
   ) => {
@@ -61,18 +61,20 @@ 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.600");
+    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("#f1f1f1", "#2D3748");
-    const scrollbarThumbBg = useColorModeValue("#888", "#4A5568");
-    const scrollbarThumbHoverBg = useColorModeValue("#555", "#718096");
+    const scrollbarTrackBg = useColorModeValue("#e2e8f0", "#1a202c");
+    const scrollbarThumbBg = useColorModeValue("#a0aec0", "#4a5568");
+    const scrollbarThumbHoverBg = useColorModeValue("#718096", "#718096");
+    const statBarBg = useColorModeValue("gray.200", "gray.800");
 
     // 根据主线类型获取配色
     const getColorScheme = useCallback((lv2Name) => {
@@ -189,10 +191,10 @@ const MainlineTimelineViewComponent = forwardRef(
             mainlines: sortedMainlines,
           });
 
-          // 初始化展开状态（默认展开前5个）
+          // 初始化展开状态（默认全部折叠，方便一目了然对比）
           const initialExpanded = {};
-          sortedMainlines.slice(0, 5).forEach((mainline) => {
-            initialExpanded[mainline.lv2_id] = true;
+          sortedMainlines.forEach((mainline) => {
+            initialExpanded[mainline.lv2_id] = false;
           });
           setExpandedGroups(initialExpanded);
         } else {
@@ -245,7 +247,7 @@ const MainlineTimelineViewComponent = forwardRef(
     // 渲染加载状态
     if (loading) {
       return (
-        <Box display={display} p={8}>
+        <Box display={display} p={8} bg={containerBg} minH="400px">
           <Center h="400px">
             <VStack spacing={4}>
               <Spinner size="xl" color="blue.500" thickness="4px" />
@@ -259,7 +261,7 @@ const MainlineTimelineViewComponent = forwardRef(
     // 渲染错误状态
     if (error) {
       return (
-        <Box display={display} p={8}>
+        <Box display={display} p={8} bg={containerBg} minH="400px">
           <Center h="400px">
             <VStack spacing={4}>
               <Text color="red.500">加载失败: {error}</Text>
@@ -278,7 +280,7 @@ const MainlineTimelineViewComponent = forwardRef(
     // 渲染空状态
     if (!mainlineData?.mainlines?.length) {
       return (
-        <Box display={display} p={8}>
+        <Box display={display} p={8} bg={containerBg} minH="400px">
           <Center h="400px">
             <VStack spacing={4}>
               <Icon as={FiZap} boxSize={12} color="gray.400" />
@@ -305,17 +307,15 @@ const MainlineTimelineViewComponent = forwardRef(
         overflowY="auto"
         h="100%"
         w="100%"
-        px={2}
-        py={2}
+        bg={containerBg}
         css={{
-          "&::-webkit-scrollbar": { width: "6px" },
+          "&::-webkit-scrollbar": { width: "8px" },
           "&::-webkit-scrollbar-track": {
             background: scrollbarTrackBg,
-            borderRadius: "10px",
           },
           "&::-webkit-scrollbar-thumb": {
             background: scrollbarThumbBg,
-            borderRadius: "10px",
+            borderRadius: "4px",
           },
           "&::-webkit-scrollbar-thumb:hover": {
             background: scrollbarThumbHoverBg,
@@ -323,32 +323,33 @@ const MainlineTimelineViewComponent = forwardRef(
           scrollBehavior: "smooth",
         }}
       >
-        {/* 顶部统计信息 */}
+        {/* 顶部统计栏 */}
         <Flex
           justify="space-between"
           align="center"
-          px={3}
+          px={4}
           py={2}
-          mb={3}
-          bg={headerBg}
-          borderRadius="lg"
-          borderWidth="1px"
-          borderColor={cardBorderColor}
+          bg={statBarBg}
+          borderBottomWidth="1px"
+          borderBottomColor={cardBorderColor}
+          position="sticky"
+          top={0}
+          zIndex={10}
         >
           <HStack spacing={4}>
             <HStack spacing={2}>
-              <Icon as={FiTrendingUp} color="blue.500" />
-              <Text fontWeight="semibold" color={textColor} fontSize="sm">
+              <Icon as={FiTrendingUp} color="blue.400" />
+              <Text fontWeight="bold" color={textColor} fontSize="sm">
                 {mainline_count} 条主线
               </Text>
             </HStack>
             <Text fontSize="sm" color={secondaryTextColor}>
-              {total_events} 个事件
+              共 {total_events} 个事件
             </Text>
             {ungrouped_count > 0 && (
-              <Text fontSize="xs" color="orange.500">
-                ({ungrouped_count} 个未归类)
-              </Text>
+              <Badge colorScheme="orange" fontSize="xs">
+                {ungrouped_count} 个未归类
+              </Badge>
             )}
           </HStack>
 
@@ -356,17 +357,19 @@ const MainlineTimelineViewComponent = forwardRef(
             <Tooltip label="全部展开">
               <IconButton
                 icon={<ChevronDownIcon />}
-                size="xs"
+                size="sm"
                 variant="ghost"
+                colorScheme="gray"
                 onClick={() => toggleAll(true)}
                 aria-label="全部展开"
               />
             </Tooltip>
             <Tooltip label="全部折叠">
               <IconButton
-                icon={<ChevronRightIcon />}
-                size="xs"
+                icon={<ChevronUpIcon />}
+                size="sm"
                 variant="ghost"
+                colorScheme="gray"
                 onClick={() => toggleAll(false)}
                 aria-label="全部折叠"
               />
@@ -374,8 +377,9 @@ const MainlineTimelineViewComponent = forwardRef(
             <Tooltip label="刷新">
               <IconButton
                 icon={<RepeatIcon />}
-                size="xs"
+                size="sm"
                 variant="ghost"
+                colorScheme="gray"
                 onClick={fetchMainlineData}
                 aria-label="刷新"
               />
@@ -383,57 +387,49 @@ const MainlineTimelineViewComponent = forwardRef(
           </HStack>
         </Flex>
 
-        {/* 主线卡片列表 */}
-        <VStack spacing={3} align="stretch">
-          {mainlines.map((mainline) => {
-            const colorScheme = getColorScheme(mainline.lv2_name);
-            const isExpanded = expandedGroups[mainline.lv2_id];
+        {/* 主线卡片网格 - 横向布局 */}
+        <Box p={3}>
+          <SimpleGrid columns={{ base: 1, md: 2, lg: 3, xl: 4 }} spacing={3}>
+            {mainlines.map((mainline) => {
+              const colorScheme = getColorScheme(mainline.lv2_name);
+              const isExpanded = expandedGroups[mainline.lv2_id];
 
-            return (
-              <Box
-                key={mainline.lv2_id || "ungrouped"}
-                bg={cardBg}
-                borderRadius="lg"
-                borderWidth="1px"
-                borderColor={cardBorderColor}
-                overflow="hidden"
-                boxShadow="sm"
-                _hover={{ boxShadow: "md" }}
-                transition="all 0.2s"
-              >
-                {/* 卡片头部 - 概念名称 */}
-                <Flex
-                  align="center"
-                  justify="space-between"
-                  px={4}
-                  py={3}
-                  bg={headerBg}
-                  cursor="pointer"
-                  _hover={{ bg: headerHoverBg }}
-                  onClick={() => toggleGroup(mainline.lv2_id)}
+              return (
+                <Box
+                  key={mainline.lv2_id || "ungrouped"}
+                  bg={cardBg}
+                  borderRadius="lg"
+                  borderWidth="1px"
+                  borderColor={cardBorderColor}
+                  borderLeftWidth="4px"
+                  borderLeftColor={`${colorScheme}.500`}
+                  overflow="hidden"
                   transition="all 0.2s"
-                  borderBottomWidth={isExpanded ? "1px" : "0"}
-                  borderBottomColor={cardBorderColor}
+                  _hover={{
+                    borderColor: `${colorScheme}.400`,
+                    transform: "translateY(-1px)",
+                    boxShadow: "lg"
+                  }}
                 >
-                  <HStack spacing={3}>
-                    <Icon
-                      as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
-                      boxSize={5}
-                      color={textColor}
-                      transition="transform 0.2s"
-                    />
-                    <Box
-                      w="4px"
-                      h="24px"
-                      bg={`${colorScheme}.500`}
-                      borderRadius="full"
-                    />
-                    <VStack align="start" spacing={0}>
-                      <HStack spacing={2}>
+                  {/* 卡片头部 */}
+                  <Flex
+                    align="center"
+                    justify="space-between"
+                    px={3}
+                    py={2}
+                    cursor="pointer"
+                    onClick={() => toggleGroup(mainline.lv2_id)}
+                    _hover={{ bg: headerHoverBg }}
+                    transition="all 0.15s"
+                  >
+                    <VStack align="start" spacing={0} flex={1} minW={0}>
+                      <HStack spacing={2} w="100%">
                         <Text
                           fontWeight="bold"
-                          fontSize="md"
+                          fontSize="sm"
                           color={textColor}
+                          noOfLines={1}
+                          flex={1}
                         >
                           {mainline.lv2_name || "其他"}
                         </Text>
@@ -442,85 +438,112 @@ const MainlineTimelineViewComponent = forwardRef(
                           fontSize="xs"
                           borderRadius="full"
                           px={2}
+                          flexShrink={0}
                         >
-                          {mainline.event_count} 条
+                          {mainline.event_count}
                         </Badge>
                       </HStack>
                       {mainline.lv1_name && (
-                        <Text fontSize="xs" color={secondaryTextColor}>
+                        <Text fontSize="xs" color={secondaryTextColor} noOfLines={1}>
                           {mainline.lv1_name}
                         </Text>
                       )}
                     </VStack>
-                  </HStack>
-                </Flex>
-
-                {/* 卡片内容 - 时间轴事件列表 */}
-                <Collapse in={isExpanded} animateOpacity>
-                  <Box px={4} py={3} position="relative">
-                    {/* 时间轴线 */}
-                    <Box
-                      position="absolute"
-                      left="24px"
-                      top="12px"
-                      bottom="12px"
-                      w="2px"
-                      bg={timelineLineColor}
-                      opacity={0.4}
-                      borderRadius="full"
+                    <Icon
+                      as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
+                      boxSize={4}
+                      color={secondaryTextColor}
+                      ml={2}
+                      flexShrink={0}
                     />
+                  </Flex>
 
-                    {/* 事件列表 */}
-                    <VStack spacing={3} align="stretch" pl={8}>
-                      {mainline.events.map((event, eventIndex) => (
-                        <Box key={event.id} position="relative">
-                          {/* 时间轴圆点 */}
-                          <Box
-                            position="absolute"
-                            left="-26px"
-                            top="50%"
-                            transform="translateY(-50%)"
-                            w="10px"
-                            h="10px"
-                            borderRadius="full"
-                            bg={timelineDotBg}
-                            border="2px solid"
-                            borderColor={cardBg}
-                            zIndex={1}
-                          />
-                          {/* 事件卡片 */}
-                          <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>
-                      ))}
-                    </VStack>
-                  </Box>
-                </Collapse>
-              </Box>
-            );
-          })}
-        </VStack>
+                  {/* 展开的事件列表 */}
+                  <Collapse in={isExpanded} animateOpacity>
+                    <Box
+                      px={3}
+                      py={2}
+                      borderTopWidth="1px"
+                      borderTopColor={cardBorderColor}
+                      maxH="400px"
+                      overflowY="auto"
+                      position="relative"
+                      css={{
+                        "&::-webkit-scrollbar": { width: "4px" },
+                        "&::-webkit-scrollbar-track": {
+                          background: scrollbarTrackBg,
+                        },
+                        "&::-webkit-scrollbar-thumb": {
+                          background: scrollbarThumbBg,
+                          borderRadius: "2px",
+                        },
+                      }}
+                    >
+                      {/* 时间轴线 */}
+                      <Box
+                        position="absolute"
+                        left="11px"
+                        top="8px"
+                        bottom="8px"
+                        w="2px"
+                        bg={timelineLineColor}
+                        opacity={0.3}
+                        borderRadius="full"
+                      />
+
+                      {/* 事件列表 */}
+                      <VStack spacing={2} align="stretch" pl={5}>
+                        {mainline.events.map((event, eventIndex) => (
+                          <Box key={event.id} position="relative">
+                            {/* 时间轴圆点 */}
+                            <Box
+                              position="absolute"
+                              left="-19px"
+                              top="50%"
+                              transform="translateY(-50%)"
+                              w="8px"
+                              h="8px"
+                              borderRadius="full"
+                              bg={timelineDotBg}
+                              border="2px solid"
+                              borderColor={cardBg}
+                              zIndex={1}
+                            />
+                            {/* 事件卡片 */}
+                            <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}
+                              compact
+                            />
+                          </Box>
+                        ))}
+                      </VStack>
+                    </Box>
+                  </Collapse>
+                </Box>
+              );
+            })}
+          </SimpleGrid>
+        </Box>
       </Box>
     );
   }