更新Company页面的UI为FUI风格

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

@@ -72,14 +72,15 @@ const formatEventTime = (dateStr) => {
  * 单个事件项组件 - 带时间轴
  */
 const TimelineEventItem = React.memo(({ event, isSelected, onEventClick, isHot }) => {
-  const changePct = event.max_change_pct ?? event.change_pct;
+  // 使用后端返回的字段：related_max_chg（最大涨幅）或 related_avg_chg（平均涨幅）
+  const changePct = event.related_max_chg ?? event.related_avg_chg ?? event.max_change_pct ?? event.change_pct;
   const hasChange = changePct != null;
   const isPositive = hasChange && changePct >= 0;
 
   return (
     <HStack
       spacing={0}
-      align="stretch"
+      align="flex-start"
       w="100%"
       cursor="pointer"
       onClick={() => onEventClick?.(event)}
@@ -87,78 +88,47 @@ const TimelineEventItem = React.memo(({ event, isSelected, onEventClick, isHot }
       borderRadius="md"
       transition="all 0.15s"
       bg={isSelected ? "rgba(66, 153, 225, 0.15)" : "transparent"}
+      py={1}
     >
-      {/* 左侧时间轴 */}
+      {/* 左侧时间 */}
-      <VStack spacing={0} align="center" w="50px" flexShrink={0} position="relative">
+      <Text
-        {/* 时间显示 */}
+        fontSize="xs"
-        <Text fontSize="xs" color={COLORS.secondaryTextColor} fontWeight="500">
+        color={COLORS.secondaryTextColor}
-          {formatEventTime(event.created_at || event.event_time)}
+        fontWeight="500"
-        </Text>
+        w="52px"
-        {/* 时间轴线 */}
+        flexShrink={0}
-        <Box
+        textAlign="right"
-          w="2px"
+        pr={2}
-          flex={1}
+      >
-          bg="rgba(255, 255, 255, 0.1)"
+        {formatEventTime(event.created_at || event.event_time)}
-          mt={1}
+      </Text>
-          minH="20px"
-        />
-        {/* 时间轴圆点 */}
-        <Box
-          position="absolute"
-          top="18px"
-          w="6px"
-          h="6px"
-          borderRadius="full"
-          bg={isHot ? "#f56565" : `${COLORS.secondaryTextColor}`}
-          border="2px solid"
-          borderColor={COLORS.cardBg}
-        />
-      </VStack>
 
       {/* 右侧内容 */}
-      <Box flex={1} py={1} pr={2} minW={0}>
+      <Box flex={1} minW={0} pr={1}>
-        <HStack spacing={1} align="start">
+        <Text
-          {/* HOT 标签 */}
+          fontSize="xs"
-          {isHot && (
+          color={COLORS.textColor}
-            <Badge
+          noOfLines={2}
-              bg="linear-gradient(135deg, #f56565 0%, #ed8936 100%)"
+          lineHeight="1.5"
-              color="white"
+        >
-              fontSize="10px"
+          {event.title}
-              px={1}
+        </Text>
-              py={0}
-              borderRadius="sm"
-              flexShrink={0}
-              display="flex"
-              alignItems="center"
-              gap="2px"
-            >
-              <FireOutlined style={{ fontSize: 10 }} />
-              HOT
-            </Badge>
-          )}
-          <Text
-            fontSize="xs"
-            color={COLORS.textColor}
-            noOfLines={2}
-            flex={1}
-            lineHeight="1.4"
-          >
-            {event.title}
-          </Text>
-          {/* 涨跌幅 */}
-          {hasChange && (
-            <Text
-              fontSize="xs"
-              fontWeight="bold"
-              color={isPositive ? "#fc8181" : "#68d391"}
-              flexShrink={0}
-            >
-              {isPositive ? "+" : ""}
-              {changePct.toFixed(1)}%
-            </Text>
-          )}
-        </HStack>
       </Box>
+
+      {/* 涨跌幅 */}
+      {hasChange && (
+        <Text
+          fontSize="xs"
+          fontWeight="bold"
+          color={isPositive ? "#fc8181" : "#68d391"}
+          flexShrink={0}
+          minW="45px"
+          textAlign="right"
+        >
+          {isPositive ? "+" : ""}
+          {changePct.toFixed(1)}%
+        </Text>
+      )}
     </HStack>
   );
 });
@@ -194,13 +164,15 @@ const MainlineCard = React.memo(
       let maxChange = -Infinity;
       let hot = null;
       mainline.events.forEach((event) => {
-        const change = event.max_change_pct ?? event.change_pct ?? -Infinity;
+        // 使用后端返回的字段：related_max_chg（最大涨幅）
+        const change = event.related_max_chg ?? event.related_avg_chg ?? event.max_change_pct ?? event.change_pct ?? -Infinity;
         if (change > maxChange) {
           maxChange = change;
           hot = event;
         }
       });
-      return hot;
+      // 只有当有正涨幅时才显示 HOT
+      return maxChange > 0 ? hot : null;
     }, [mainline.events]);
 
     const hotEventId = hotEvent?.id;
@@ -359,14 +331,14 @@ const MainlineCard = React.memo(
                   {hotEvent.title}
                 </Text>
                 {/* HOT 事件涨幅 */}
-                {(hotEvent.max_change_pct ?? hotEvent.change_pct) != null && (
+                {(hotEvent.related_max_chg ?? hotEvent.related_avg_chg) != null && (
                   <Text
                     fontSize="xs"
                     fontWeight="bold"
                     color="#fc8181"
                     flexShrink={0}
                   >
-                    +{(hotEvent.max_change_pct ?? hotEvent.change_pct).toFixed(1)}%
+                    +{(hotEvent.related_max_chg ?? hotEvent.related_avg_chg).toFixed(1)}%
                   </Text>
                 )}
               </HStack>