更新Company页面的UI为FUI风格

app.py

@@ -11216,7 +11216,33 @@ def get_events_by_mainline():
             else:
                 ungrouped_events.append(event_data)
 
-        # ==================== 5. 整理返回数据 ====================
+        # ==================== 5. 获取 lv2 概念涨跌幅 ====================
+        lv2_price_map = {}
+        try:
+            # 获取所有 lv2 名称
+            lv2_names = [group['lv2_name'] for group in mainline_groups.values() if group.get('lv2_name')]
+            if lv2_names:
+                # 查询 concept_daily_stats 表获取最新涨跌幅
+                price_sql = text('''
+                    SELECT concept_name, avg_change_pct, trade_date
+                    FROM concept_daily_stats
+                    WHERE concept_type = 'lv2'
+                    AND concept_name IN :names
+                    AND trade_date = (
+                        SELECT MAX(trade_date) FROM concept_daily_stats WHERE concept_type = 'lv2'
+                    )
+                ''')
+                price_result = db.session.execute(price_sql, {'names': tuple(lv2_names)}).fetchall()
+                for row in price_result:
+                    lv2_price_map[row.concept_name] = {
+                        'avg_change_pct': float(row.avg_change_pct) if row.avg_change_pct else None,
+                        'trade_date': str(row.trade_date) if row.trade_date else None
+                    }
+                app.logger.info(f'[mainline] 获取 lv2 涨跌幅: {len(lv2_price_map)} 条')
+        except Exception as price_err:
+            app.logger.warning(f'[mainline] 获取 lv2 涨跌幅失败: {price_err}')
+
+        # ==================== 6. 整理返回数据 ====================
         mainlines = []
         for lv2_id, group in mainline_groups.items():
             # 按时间倒序排列（不限制数量）
@@ -11226,6 +11252,14 @@ def get_events_by_mainline():
                 reverse=True
             )
             group['event_count'] = len(group['events'])
+            # 添加涨跌幅数据
+            lv2_name = group.get('lv2_name', '')
+            if lv2_name in lv2_price_map:
+                group['avg_change_pct'] = lv2_price_map[lv2_name]['avg_change_pct']
+                group['price_date'] = lv2_price_map[lv2_name]['trade_date']
+            else:
+                group['avg_change_pct'] = None
+                group['price_date'] = None
             mainlines.append(group)
 
         # 按事件数量排序

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

@@ -22,6 +22,7 @@ import {
   IconButton,
   Tooltip,
   Button,
+  SimpleGrid,
 } from "@chakra-ui/react";
 import {
   ChevronDownIcon,
@@ -29,7 +30,7 @@ import {
   RepeatIcon,
 } from "@chakra-ui/icons";
 import { FiTrendingUp, FiZap } from "react-icons/fi";
-import DynamicNewsEventCard from "../../EventCard/DynamicNewsEventCard";
+import MiniEventCard from "../../EventCard/MiniEventCard";
 import { getApiBase } from "@utils/apiConfig";
 
 // 固定深色主题颜色
@@ -40,8 +41,6 @@ const COLORS = {
   headerHoverBg: "#2d323e",
   textColor: "#e2e8f0",
   secondaryTextColor: "#a0aec0",
-  timelineLineColor: "#4299e1",
-  timelineDotBg: "#63b3ed",
   scrollbarTrackBg: "#1a1d24",
   scrollbarThumbBg: "#4a5568",
   scrollbarThumbHoverBg: "#718096",
@@ -49,7 +48,7 @@ const COLORS = {
 };
 
 // 每次加载的事件数量
-const EVENTS_PER_LOAD = 10;
+const EVENTS_PER_LOAD = 12;
 
 /**
  * 单个主线卡片组件 - 支持懒加载
@@ -61,9 +60,6 @@ const MainlineCard = React.memo(({
   onToggle,
   selectedEvent,
   onEventSelect,
-  eventFollowStatus,
-  onToggleFollow,
-  borderColor,
 }) => {
   // 懒加载状态
   const [displayCount, setDisplayCount] = useState(EVENTS_PER_LOAD);
@@ -85,9 +81,9 @@ const MainlineCard = React.memo(({
   const hasMore = displayCount < mainline.events.length;
 
   // 加载更多
-  const loadMore = useCallback(() => {
+  const loadMore = useCallback((e) => {
+    e.stopPropagation();
     setIsLoadingMore(true);
-    // 使用 setTimeout 模拟异步，避免 UI 卡顿
     setTimeout(() => {
       setDisplayCount(prev => Math.min(prev + EVENTS_PER_LOAD, mainline.events.length));
       setIsLoadingMore(false);
@@ -102,8 +98,8 @@ const MainlineCard = React.memo(({
       borderColor={COLORS.cardBorderColor}
       borderTopWidth="3px"
       borderTopColor={`${colorScheme}.500`}
-      minW={isExpanded ? "320px" : "200px"}
+      minW={isExpanded ? "400px" : "200px"}
-      maxW={isExpanded ? "380px" : "240px"}
+      maxW={isExpanded ? "500px" : "240px"}
       h="100%"
       display="flex"
       flexDirection="column"
@@ -149,11 +145,24 @@ const MainlineCard = React.memo(({
               {mainline.event_count}
             </Badge>
           </HStack>
+          <HStack spacing={2}>
             {mainline.lv1_name && (
               <Text fontSize="xs" color={COLORS.secondaryTextColor} noOfLines={1}>
                 {mainline.lv1_name}
               </Text>
             )}
+            {/* 涨跌幅显示 */}
+            {mainline.avg_change_pct != null && (
+              <Text
+                fontSize="xs"
+                fontWeight="bold"
+                color={mainline.avg_change_pct >= 0 ? "#fc8181" : "#68d391"}
+              >
+                {mainline.avg_change_pct >= 0 ? "+" : ""}
+                {mainline.avg_change_pct.toFixed(2)}%
+              </Text>
+            )}
+          </HStack>
         </VStack>
         <Icon
           as={isExpanded ? ChevronUpIcon : ChevronDownIcon}
@@ -167,11 +176,10 @@ const MainlineCard = React.memo(({
       {/* 事件列表区域 */}
       {isExpanded ? (
         <Box
-          px={3}
+          px={2}
           py={2}
           flex={1}
           overflowY="auto"
-          position="relative"
           css={{
             "&::-webkit-scrollbar": { width: "4px" },
             "&::-webkit-scrollbar-track": {
@@ -183,62 +191,17 @@ const MainlineCard = React.memo(({
             },
           }}
         >
-          {/* 时间轴线 */}
+          {/* 事件网格 - 2列布局 */}
-          <Box
+          <SimpleGrid columns={2} spacing={2}>
-            position="absolute"
+            {displayedEvents.map((event) => (
-            left="11px"
+              <MiniEventCard
-            top="8px"
+                key={event.id}
-            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) => {
+                onEventClick={onEventSelect}
-                    onEventSelect?.(clickedEvent);
-                  }}
-                  onTitleClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onEventSelect?.(event);
-                  }}
-                  onToggleFollow={() => onToggleFollow?.(event.id)}
-                  borderColor={borderColor}
-                  compact
               />
-              </Box>
             ))}
+          </SimpleGrid>
 
           {/* 加载更多按钮 */}
           {hasMore && (
@@ -250,18 +213,18 @@ const MainlineCard = React.memo(({
               isLoading={isLoadingMore}
               loadingText="加载中..."
               w="100%"
+              mt={2}
               _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) => (
+            {mainline.events.slice(0, 4).map((event) => (
               <Text
                 key={event.id}
                 fontSize="xs"
@@ -277,9 +240,9 @@ const MainlineCard = React.memo(({
                 • {event.title}
               </Text>
             ))}
-            {mainline.events.length > 3 && (
+            {mainline.events.length > 4 && (
               <Text fontSize="xs" color={COLORS.secondaryTextColor}>
-                ... 还有 {mainline.events.length - 3} 条
+                ... 还有 {mainline.events.length - 4} 条
               </Text>
             )}
           </VStack>
@@ -428,10 +391,10 @@ const MainlineTimelineViewComponent = forwardRef(
             mainlines: sortedMainlines,
           });
 
-          // 初始化展开状态（默认全部折叠）
+          // 初始化展开状态（默认全部展开）
           const initialExpanded = {};
           sortedMainlines.forEach((mainline) => {
-            initialExpanded[mainline.lv2_id] = false;
+            initialExpanded[mainline.lv2_id] = true;
           });
           setExpandedGroups(initialExpanded);
         } else {
@@ -610,7 +573,7 @@ const MainlineTimelineViewComponent = forwardRef(
           </HStack>
         </Flex>
 
-        {/* 主线卡片横向滚动容器 */}
+        {/* 主线卡片横向滚动容器 - 滚动条在顶部 */}
         <Box
           overflowX="auto"
           overflowY="hidden"
@@ -627,6 +590,8 @@ const MainlineTimelineViewComponent = forwardRef(
             "&::-webkit-scrollbar-thumb:hover": {
               background: COLORS.scrollbarThumbHoverBg,
             },
+            // 滚动条放在顶部
+            transform: "rotateX(180deg)",
           }}
         >
           <HStack
@@ -635,6 +600,10 @@ const MainlineTimelineViewComponent = forwardRef(
             align="stretch"
             h="100%"
             minW="max-content"
+            css={{
+              // 内容反转回来（因为外层容器旋转了180度）
+              transform: "rotateX(180deg)",
+            }}
           >
             {mainlines.map((mainline) => (
               <MainlineCard
@@ -645,9 +614,6 @@ const MainlineTimelineViewComponent = forwardRef(
                 onToggle={() => toggleGroup(mainline.lv2_id)}
                 selectedEvent={selectedEvent}
                 onEventSelect={onEventSelect}
-                eventFollowStatus={eventFollowStatus}
-                onToggleFollow={onToggleFollow}
-                borderColor={borderColor}
               />
             ))}
           </HStack>

src/views/Community/components/EventCard/MiniEventCard.js

@@ -0,0 +1,151 @@
+// src/views/Community/components/EventCard/MiniEventCard.js
+// 迷你事件卡片组件 - 用于主线模式的紧凑显示
+
+import React from 'react';
+import {
+    Box,
+    Text,
+    HStack,
+    Tooltip,
+    Badge,
+} from '@chakra-ui/react';
+import dayjs from 'dayjs';
+import { getImportanceConfig } from '@constants/importanceLevels';
+
+// 固定深色主题颜色
+const COLORS = {
+    cardBg: "#2d323e",
+    cardHoverBg: "#363c4a",
+    cardBorderColor: "#4a5568",
+    textColor: "#e2e8f0",
+    secondaryTextColor: "#a0aec0",
+    linkColor: "#63b3ed",
+    selectedBg: "#2c5282",
+    selectedBorderColor: "#4299e1",
+};
+
+/**
+ * 迷你事件卡片组件
+ * 紧凑的卡片式布局，适合在主线模式中横向排列
+ */
+const MiniEventCard = React.memo(({
+    event,
+    isSelected = false,
+    onEventClick,
+}) => {
+    const importance = getImportanceConfig(event.importance);
+
+    // 格式化时间为简短形式
+    const formatTime = (timestamp) => {
+        const date = dayjs(timestamp);
+        const now = dayjs();
+        const diffDays = now.diff(date, 'day');
+
+        if (diffDays === 0) {
+            return date.format('HH:mm');
+        } else if (diffDays === 1) {
+            return '昨天 ' + date.format('HH:mm');
+        } else if (diffDays < 7) {
+            return date.format('MM-DD HH:mm');
+        } else {
+            return date.format('MM-DD');
+        }
+    };
+
+    // 获取涨跌幅显示
+    const getChangeDisplay = () => {
+        const avgChange = event.related_avg_chg;
+        if (avgChange == null || isNaN(Number(avgChange))) {
+            return null;
+        }
+        const numChange = Number(avgChange);
+        const isPositive = numChange > 0;
+        return {
+            value: `${isPositive ? '+' : ''}${numChange.toFixed(1)}%`,
+            color: isPositive ? '#fc8181' : '#68d391',
+        };
+    };
+
+    const changeDisplay = getChangeDisplay();
+
+    return (
+        <Tooltip
+            label={
+                <Box>
+                    <Text fontWeight="bold" mb={1}>{event.title}</Text>
+                    <Text fontSize="xs" color="gray.300">
+                        {dayjs(event.created_at).format('YYYY-MM-DD HH:mm')}
+                    </Text>
+                    {event.description && (
+                        <Text fontSize="xs" mt={1} noOfLines={3}>
+                            {event.description}
+                        </Text>
+                    )}
+                </Box>
+            }
+            placement="top"
+            hasArrow
+            bg="gray.800"
+            color="white"
+            p={3}
+            borderRadius="md"
+            maxW="300px"
+        >
+            <Box
+                bg={isSelected ? COLORS.selectedBg : COLORS.cardBg}
+                borderWidth="1px"
+                borderColor={isSelected ? COLORS.selectedBorderColor : COLORS.cardBorderColor}
+                borderRadius="md"
+                px={2}
+                py={1.5}
+                cursor="pointer"
+                onClick={() => onEventClick?.(event)}
+                _hover={{
+                    bg: isSelected ? COLORS.selectedBg : COLORS.cardHoverBg,
+                    borderColor: importance.color || COLORS.cardBorderColor,
+                    transform: 'translateY(-1px)',
+                }}
+                transition="all 0.15s ease"
+                minW="0"
+            >
+                {/* 第一行：时间 + 涨跌幅 */}
+                <HStack justify="space-between" spacing={1} mb={1}>
+                    <Text
+                        fontSize="xs"
+                        color={COLORS.secondaryTextColor}
+                        flexShrink={0}
+                    >
+                        {formatTime(event.created_at)}
+                    </Text>
+                    {changeDisplay && (
+                        <Badge
+                            fontSize="xs"
+                            bg="transparent"
+                            color={changeDisplay.color}
+                            fontWeight="bold"
+                            px={0}
+                        >
+                            {changeDisplay.value}
+                        </Badge>
+                    )}
+                </HStack>
+
+                {/* 第二行：标题 */}
+                <Text
+                    fontSize="sm"
+                    color={COLORS.linkColor}
+                    fontWeight="medium"
+                    noOfLines={2}
+                    lineHeight="1.3"
+                    _hover={{ textDecoration: 'underline' }}
+                >
+                    {event.title}
+                </Text>
+            </Box>
+        </Tooltip>
+    );
+});
+
+MiniEventCard.displayName = 'MiniEventCard';
+
+export default MiniEventCard;