更新Company页面的UI为FUI风格

2025-12-22 10:41:54 +08:00
parent 48efc9b456
commit 2cc0aa2629
3 changed files with 250 additions and 99 deletions
--- a/src/views/Community/components/EventCard/MiniEventCard.js
+++ b/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;