更新Company页面的UI为FUI风格

2025-12-22 08:01:41 +08:00
parent ee734e719e
commit 46c7649bf0
2 changed files with 179 additions and 157 deletions
--- a/app.py
+++ b/app.py
@@ -11036,7 +11036,6 @@ def get_events_by_mainline():
        # 获取请求参数
        recent_days = request.args.get('recent_days', 7, type=int)
        importance = request.args.get('importance', 'all')
-        limit_per_mainline = request.args.get('limit', 20, type=int)

        # 计算日期范围
        since_date = datetime.now() - timedelta(days=recent_days)
@@ -11106,8 +11105,8 @@ def get_events_by_mainline():
        # 按时间倒序
        query = query.order_by(Event.created_at.desc())

-        # 获取事件（限制总数防止性能问题）
-        events = query.limit(500).all()
+        # 获取事件（提高限制以支持主线模式显示更多数据）
+        events = query.limit(2000).all()

        app.logger.info(f'[mainline] 查询到 {len(events)} 个事件')

@@ -11220,12 +11219,12 @@ def get_events_by_mainline():
        # ==================== 5. 整理返回数据 ====================
        mainlines = []
        for lv2_id, group in mainline_groups.items():
-            # 按时间倒序，限制每组数量
+            # 按时间倒序排列（不限制数量）
            group['events'] = sorted(
                group['events'],
                key=lambda x: x['created_at'] or '',
                reverse=True
-            )[:limit_per_mainline]
+            )
            group['event_count'] = len(group['events'])
            mainlines.append(group)

--- 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,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,8 +387,9 @@ const MainlineTimelineViewComponent = forwardRef(
          </HStack>
        </Flex>

-        {/* 主线卡片列表 */}
-        <VStack spacing={3} align="stretch">
+        {/* 主线卡片网格 - 横向布局 */}
+        <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];
@@ -396,44 +401,35 @@ const MainlineTimelineViewComponent = forwardRef(
                  borderRadius="lg"
                  borderWidth="1px"
                  borderColor={cardBorderColor}
+                  borderLeftWidth="4px"
+                  borderLeftColor={`${colorScheme}.500`}
                  overflow="hidden"
-                boxShadow="sm"
-                _hover={{ boxShadow: "md" }}
                  transition="all 0.2s"
+                  _hover={{
+                    borderColor: `${colorScheme}.400`,
+                    transform: "translateY(-1px)",
+                    boxShadow: "lg"
+                  }}
                >
-                {/* 卡片头部 - 概念名称 */}
+                  {/* 卡片头部 */}
                  <Flex
                    align="center"
                    justify="space-between"
-                  px={4}
-                  py={3}
-                  bg={headerBg}
+                    px={3}
+                    py={2}
                    cursor="pointer"
-                  _hover={{ bg: headerHoverBg }}
                    onClick={() => toggleGroup(mainline.lv2_id)}
-                  transition="all 0.2s"
-                  borderBottomWidth={isExpanded ? "1px" : "0"}
-                  borderBottomColor={cardBorderColor}
+                    _hover={{ bg: headerHoverBg }}
+                    transition="all 0.15s"
                  >
-                  <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}>
+                    <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,46 +438,71 @@ 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>
+                    <Icon
+                      as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
+                      boxSize={4}
+                      color={secondaryTextColor}
+                      ml={2}
+                      flexShrink={0}
+                    />
                  </Flex>

-                {/* 卡片内容 - 时间轴事件列表 */}
+                  {/* 展开的事件列表 */}
                  <Collapse in={isExpanded} animateOpacity>
-                  <Box px={4} py={3} position="relative">
+                    <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="24px"
-                      top="12px"
-                      bottom="12px"
+                        left="11px"
+                        top="8px"
+                        bottom="8px"
                        w="2px"
                        bg={timelineLineColor}
-                      opacity={0.4}
+                        opacity={0.3}
                        borderRadius="full"
                      />

                      {/* 事件列表 */}
-                    <VStack spacing={3} align="stretch" pl={8}>
+                      <VStack spacing={2} align="stretch" pl={5}>
                        {mainline.events.map((event, eventIndex) => (
                          <Box key={event.id} position="relative">
                            {/* 时间轴圆点 */}
                            <Box
                              position="absolute"
-                            left="-26px"
+                              left="-19px"
                              top="50%"
                              transform="translateY(-50%)"
-                            w="10px"
-                            h="10px"
+                              w="8px"
+                              h="8px"
                              borderRadius="full"
                              bg={timelineDotBg}
                              border="2px solid"
@@ -511,6 +532,7 @@ const MainlineTimelineViewComponent = forwardRef(
                              }}
                              onToggleFollow={() => onToggleFollow?.(event.id)}
                              borderColor={borderColor}
+                              compact
                            />
                          </Box>
                        ))}
@@ -520,7 +542,8 @@ const MainlineTimelineViewComponent = forwardRef(
                </Box>
              );
            })}
-        </VStack>
+          </SimpleGrid>
+        </Box>
      </Box>
    );
  }