From 23dd57366329ae45346feb1d0de6efb1122ed15e Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Mon, 22 Dec 2025 10:21:49 +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           | 519 ++++++++++--------
 1 file changed, 295 insertions(+), 224 deletions(-)

diff --git a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
index 7d0a55b8..6d1c64e3 100644
--- a/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
+++ b/src/views/Community/components/DynamicNews/layouts/MainlineTimelineView.js
@@ -7,6 +7,7 @@ import React, {
   forwardRef,
   useImperativeHandle,
   useCallback,
+  useMemo,
 } from "react";
 import {
   Box,
@@ -16,12 +17,11 @@ import {
   Badge,
   Flex,
   Icon,
-  Collapse,
   Spinner,
   Center,
   IconButton,
-  useColorModeValue,
   Tooltip,
+  Button,
 } from "@chakra-ui/react";
 import {
   ChevronDownIcon,
@@ -32,14 +32,267 @@ import { FiTrendingUp, FiZap } from "react-icons/fi";
 import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
 import { getApiBase } from "@utils/apiConfig";
 
+// 固定深色主题颜色
+const COLORS = {
+  containerBg: "#1a1d24",
+  cardBg: "#252a34",
+  cardBorderColor: "#3a3f4b",
+  headerHoverBg: "#2d323e",
+  textColor: "#e2e8f0",
+  secondaryTextColor: "#a0aec0",
+  timelineLineColor: "#4299e1",
+  timelineDotBg: "#63b3ed",
+  scrollbarTrackBg: "#1a1d24",
+  scrollbarThumbBg: "#4a5568",
+  scrollbarThumbHoverBg: "#718096",
+  statBarBg: "#252a34",
+};
+
+// 每次加载的事件数量
+const EVENTS_PER_LOAD = 10;
+
+/**
+ * 单个主线卡片组件 - 支持懒加载
+ */
+const MainlineCard = React.memo(({
+  mainline,
+  colorScheme,
+  isExpanded,
+  onToggle,
+  selectedEvent,
+  onEventSelect,
+  eventFollowStatus,
+  onToggleFollow,
+  borderColor,
+}) => {
+  // 懒加载状态
+  const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  // 重置显示数量当折叠时
+  useEffect(() => {
+    if (!isExpanded) {
+      setDisplayCount(EVENTS_PER_LOAD);
+    }
+  }, [isExpanded]);
+
+  // 当前显示的事件
+  const displayedEvents = useMemo(() => {
+    return mainline.events.slice(0, displayCount);
+  }, [mainline.events, displayCount]);
+
+  // 是否还有更多
+  const hasMore = displayCount < mainline.events.length;
+
+  // 加载更多
+  const loadMore = useCallback(() => {
+    setIsLoadingMore(true);
+    // 使用 setTimeout 模拟异步，避免 UI 卡顿
+    setTimeout(() => {
+      setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
+      setIsLoadingMore(false);
+    }, 50);
+  }, [mainline.events.length]);
+
+  return (
+    <Box
+      bg={COLORS.cardBg}
+      borderRadius="lg"
+      borderWidth="1px"
+      borderColor={COLORS.cardBorderColor}
+      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`,
+        boxShadow: "lg"
+      }}
+    >
+      {/* 卡片头部 */}
+      <Flex
+        align="center"
+        justify="space-between"
+        px={3}
+        py={2}
+        cursor="pointer"
+        onClick={onToggle}
+        _hover={{ bg: COLORS.headerHoverBg }}
+        transition="all 0.15s"
+        borderBottomWidth="1px"
+        borderBottomColor={COLORS.cardBorderColor}
+        flexShrink={0}
+      >
+        <VStack align="start" spacing={0} flex={1} minW={0}>
+          <HStack spacing={2} w="100%">
+            <Text
+              fontWeight="bold"
+              fontSize="sm"
+              color={COLORS.textColor}
+              noOfLines={1}
+              flex={1}
+            >
+              {mainline.lv2_name || "其他"}
+            </Text>
+            <Badge
+              colorScheme={colorScheme}
+              fontSize="xs"
+              borderRadius="full"
+              px={2}
+              flexShrink={0}
+            >
+              {mainline.event_count}
+            </Badge>
+          </HStack>
+          {mainline.lv1_name && (
+            <Text fontSize="xs" color={COLORS.secondaryTextColor} noOfLines={1}>
+              {mainline.lv1_name}
+            </Text>
+          )}
+        </VStack>
+        <Icon
+          as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
+          boxSize={4}
+          color={COLORS.secondaryTextColor}
+          ml={2}
+          flexShrink={0}
+        />
+      </Flex>
+
+      {/* 事件列表区域 */}
+      {isExpanded ? (
+        <Box
+          px={3}
+          py={2}
+          flex={1}
+          overflowY="auto"
+          position="relative"
+          css={{
+            "&::-webkit-scrollbar": { width: "4px" },
+            "&::-webkit-scrollbar-track": {
+              background: COLORS.scrollbarTrackBg,
+            },
+            "&::-webkit-scrollbar-thumb": {
+              background: COLORS.scrollbarThumbBg,
+              borderRadius: "2px",
+            },
+          }}
+        >
+          {/* 时间轴线 */}
+          <Box
+            position="absolute"
+            left="11px"
+            top="8px"
+            bottom="8px"
+            w="2px"
+            bg={COLORS.timelineLineColor}
+            opacity={0.3}
+            borderRadius="full"
+          />
+
+          {/* 事件列表 */}
+          <VStack spacing={2} align="stretch" pl={5}>
+            {displayedEvents.map((event, eventIndex) => (
+              <Box key={event.id} position="relative">
+                {/* 时间轴圆点 */}
+                <Box
+                  position="absolute"
+                  left="-19px"
+                  top="12px"
+                  w="8px"
+                  h="8px"
+                  borderRadius="full"
+                  bg={COLORS.timelineDotBg}
+                  border="2px solid"
+                  borderColor={COLORS.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>
+            ))}
+
+            {/* 加载更多按钮 */}
+            {hasMore && (
+              <Button
+                size="sm"
+                variant="ghost"
+                color={COLORS.secondaryTextColor}
+                onClick={loadMore}
+                isLoading={isLoadingMore}
+                loadingText="加载中..."
+                w="100%"
+                _hover={{ bg: COLORS.headerHoverBg }}
+              >
+                加载更多 ({mainline.events.length - displayCount} 条)
+              </Button>
+            )}
+          </VStack>
+        </Box>
+      ) : (
+        /* 折叠时显示简要信息 */
+        <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={COLORS.secondaryTextColor}
+                noOfLines={1}
+                cursor="pointer"
+                _hover={{ color: COLORS.textColor }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onEventSelect?.(event);
+                }}
+              >
+                • {event.title}
+              </Text>
+            ))}
+            {mainline.events.length > 3 && (
+              <Text fontSize="xs" color={COLORS.secondaryTextColor}>
+                ... 还有 {mainline.events.length - 3} 条
+              </Text>
+            )}
+          </VStack>
+        </Box>
+      )}
+    </Box>
+  );
+});
+
+MainlineCard.displayName = "MainlineCard";
+
 /**
  * 主线时间轴布局组件
- *
- * 功能：
- * 1. 调用 /api/events/mainline 获取预分组数据
- * 2. 按 lv2 概念分组展示，横向滚动布局
- * 3. 按事件数量从多到少排序
- * 4. 深色背景风格，与列表模式统一
  */
 const MainlineTimelineViewComponent = forwardRef(
   (
@@ -60,20 +313,6 @@ const MainlineTimelineViewComponent = forwardRef(
     const [mainlineData, setMainlineData] = useState(null);
     const [expandedGroups, setExpandedGroups] = useState({});
 
-    // 深色主题颜色
-    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.100", "#252a34");
-
     // 根据主线类型获取配色
     const getColorScheme = useCallback((lv2Name) => {
       if (!lv2Name) return "gray";
@@ -245,11 +484,11 @@ const MainlineTimelineViewComponent = forwardRef(
     // 渲染加载状态
     if (loading) {
       return (
-        <Box display={display} p={8} bg={containerBg} minH="400px">
+        <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
           <Center h="400px">
             <VStack spacing={4}>
               <Spinner size="xl" color="blue.500" thickness="4px" />
-              <Text color={secondaryTextColor}>正在加载主线数据...</Text>
+              <Text color={COLORS.secondaryTextColor}>正在加载主线数据...</Text>
             </VStack>
           </Center>
         </Box>
@@ -259,7 +498,7 @@ const MainlineTimelineViewComponent = forwardRef(
     // 渲染错误状态
     if (error) {
       return (
-        <Box display={display} p={8} bg={containerBg} minH="400px">
+        <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
           <Center h="400px">
             <VStack spacing={4}>
               <Text color="red.500">加载失败: {error}</Text>
@@ -278,12 +517,12 @@ const MainlineTimelineViewComponent = forwardRef(
     // 渲染空状态
     if (!mainlineData?.mainlines?.length) {
       return (
-        <Box display={display} p={8} bg={containerBg} minH="400px">
+        <Box display={display} p={8} bg={COLORS.containerBg} minH="400px">
           <Center h="400px">
             <VStack spacing={4}>
               <Icon as={FiZap} boxSize={12} color="gray.400" />
-              <Text color={secondaryTextColor}>暂无主线数据</Text>
-              <Text fontSize="sm" color={secondaryTextColor}>
+              <Text color={COLORS.secondaryTextColor}>暂无主线数据</Text>
+              <Text fontSize="sm" color={COLORS.secondaryTextColor}>
                 尝试调整筛选条件
               </Text>
             </VStack>
@@ -304,7 +543,7 @@ const MainlineTimelineViewComponent = forwardRef(
         display={display}
         h="100%"
         w="100%"
-        bg={containerBg}
+        bg={COLORS.containerBg}
         overflow="hidden"
       >
         {/* 顶部统计栏 */}
@@ -313,18 +552,18 @@ const MainlineTimelineViewComponent = forwardRef(
           align="center"
           px={4}
           py={2}
-          bg={statBarBg}
+          bg={COLORS.statBarBg}
           borderBottomWidth="1px"
-          borderBottomColor={cardBorderColor}
+          borderBottomColor={COLORS.cardBorderColor}
         >
           <HStack spacing={4}>
             <HStack spacing={2}>
               <Icon as={FiTrendingUp} color="blue.400" />
-              <Text fontWeight="bold" color={textColor} fontSize="sm">
+              <Text fontWeight="bold" color={COLORS.textColor} fontSize="sm">
                 {mainline_count} 条主线
               </Text>
             </HStack>
-            <Text fontSize="sm" color={secondaryTextColor}>
+            <Text fontSize="sm" color={COLORS.secondaryTextColor}>
               共 {total_events} 个事件
             </Text>
             {ungrouped_count > 0 && (
@@ -340,9 +579,10 @@ const MainlineTimelineViewComponent = forwardRef(
                 icon={<ChevronDownIcon />}
                 size="sm"
                 variant="ghost"
-                colorScheme="gray"
+                color={COLORS.secondaryTextColor}
                 onClick={() => toggleAll(true)}
                 aria-label="全部展开"
+                _hover={{ bg: COLORS.headerHoverBg }}
               />
             </Tooltip>
             <Tooltip label="全部折叠">
@@ -350,9 +590,10 @@ const MainlineTimelineViewComponent = forwardRef(
                 icon={<ChevronUpIcon />}
                 size="sm"
                 variant="ghost"
-                colorScheme="gray"
+                color={COLORS.secondaryTextColor}
                 onClick={() => toggleAll(false)}
                 aria-label="全部折叠"
+                _hover={{ bg: COLORS.headerHoverBg }}
               />
             </Tooltip>
             <Tooltip label="刷新">
@@ -360,9 +601,10 @@ const MainlineTimelineViewComponent = forwardRef(
                 icon={<RepeatIcon />}
                 size="sm"
                 variant="ghost"
-                colorScheme="gray"
+                color={COLORS.secondaryTextColor}
                 onClick={fetchMainlineData}
                 aria-label="刷新"
+                _hover={{ bg: COLORS.headerHoverBg }}
               />
             </Tooltip>
           </HStack>
@@ -376,14 +618,14 @@ const MainlineTimelineViewComponent = forwardRef(
           css={{
             "&::-webkit-scrollbar": { height: "8px" },
             "&::-webkit-scrollbar-track": {
-              background: scrollbarTrackBg,
+              background: COLORS.scrollbarTrackBg,
             },
             "&::-webkit-scrollbar-thumb": {
-              background: scrollbarThumbBg,
+              background: COLORS.scrollbarThumbBg,
               borderRadius: "4px",
             },
             "&::-webkit-scrollbar-thumb:hover": {
-              background: scrollbarThumbHoverBg,
+              background: COLORS.scrollbarThumbHoverBg,
             },
           }}
         >
@@ -394,191 +636,20 @@ const MainlineTimelineViewComponent = forwardRef(
             h="100%"
             minW="max-content"
           >
-            {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}
-                  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`,
-                    boxShadow: "lg"
-                  }}
-                >
-                  {/* 卡片头部 */}
-                  <Flex
-                    align="center"
-                    justify="space-between"
-                    px={3}
-                    py={2}
-                    cursor="pointer"
-                    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%">
-                        <Text
-                          fontWeight="bold"
-                          fontSize="sm"
-                          color={textColor}
-                          noOfLines={1}
-                          flex={1}
-                        >
-                          {mainline.lv2_name || "其他"}
-                        </Text>
-                        <Badge
-                          colorScheme={colorScheme}
-                          fontSize="xs"
-                          borderRadius="full"
-                          px={2}
-                          flexShrink={0}
-                        >
-                          {mainline.event_count}
-                        </Badge>
-                      </HStack>
-                      {mainline.lv1_name && (
-                        <Text fontSize="xs" color={secondaryTextColor} noOfLines={1}>
-                          {mainline.lv1_name}
-                        </Text>
-                      )}
-                    </VStack>
-                    <Icon
-                      as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
-                      boxSize={4}
-                      color={secondaryTextColor}
-                      ml={2}
-                      flexShrink={0}
-                    />
-                  </Flex>
-
-                  {/* 事件列表 - 可滚动到底 */}
-                  <Collapse in={isExpanded} animateOpacity style={{ flex: 1, overflow: 'hidden' }}>
-                    <Box
-                      px={3}
-                      py={2}
-                      h="100%"
-                      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="12px"
-                              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>
-
-                  {/* 折叠时显示简要信息 */}
-                  {!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>
-              );
-            })}
+            {mainlines.map((mainline) => (
+              <MainlineCard
+                key={mainline.lv2_id || "ungrouped"}
+                mainline={mainline}
+                colorScheme={getColorScheme(mainline.lv2_name)}
+                isExpanded={expandedGroups[mainline.lv2_id]}
+                onToggle={() => toggleGroup(mainline.lv2_id)}
+                selectedEvent={selectedEvent}
+                onEventSelect={onEventSelect}
+                eventFollowStatus={eventFollowStatus}
+                onToggleFollow={onToggleFollow}
+                borderColor={borderColor}
+              />
+            ))}
           </HStack>
         </Box>
       </Box>