feat(EventList): 重构渲染和UI - 精简/详细模式优化、推送控制、描述展开
**主要变更**： 1. **渲染函数重构**： - 重写 renderCompactEvent：标题2行+标签内联+按钮右侧布局 - 重写 renderDetailedEvent：标题+优先级+统计+价格标签+时间作者 - 添加 getTimelineBoxStyle 函数统一时间轴样式 - renderCompactEvent 支持隔行变色（index % 2） 2. **顶部控制栏全面升级**： - 改为 sticky 定位，全宽白色背景 - 左侧占位，中间嵌入分页器，右侧控制按钮 - 新增桌面推送开关（使用 handlePushToggle） - WebSocket 状态简化为 🟢实时/🔴离线 - 精简模式切换改为 xs 尺寸 3. **描述展开/收起功能**： - 详细模式支持长描述（>120字符）展开/收起 - 使用 expandedDescriptions 状态管理 - noOfLines 动态切换 4. **统一时间格式**： - 所有时间显示统一为 YYYY-MM-DD HH:mm **效果**： - 精简模式更紧凑，信息密度更高 - 详细模式布局更清晰，价格标签更易读 - 顶部控制栏功能集中，操作更便捷 - 推送权限管理可视化 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -413,104 +413,150 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
navigate(`/event-detail/${eventId}`);
|
||||
};
|
||||
|
||||
// 精简模式的事件渲染
|
||||
const renderCompactEvent = (event) => {
|
||||
// 时间轴样式配置（固定使用轻量卡片样式）
|
||||
const getTimelineBoxStyle = () => {
|
||||
return {
|
||||
bg: useColorModeValue('gray.50', 'gray.700'),
|
||||
borderColor: useColorModeValue('gray.400', 'gray.500'),
|
||||
borderWidth: '2px',
|
||||
textColor: useColorModeValue('blue.600', 'blue.400'),
|
||||
boxShadow: 'sm',
|
||||
};
|
||||
};
|
||||
|
||||
// 精简模式的事件渲染（优化版：标题2行+标签内联+按钮右侧）
|
||||
const renderCompactEvent = (event, index) => {
|
||||
const importance = getImportanceConfig(event.importance);
|
||||
const isFollowing = !!followingMap[event.id];
|
||||
const followerCount = followCountMap[event.id] ?? (event.follower_count || 0);
|
||||
const timelineStyle = getTimelineBoxStyle();
|
||||
|
||||
return (
|
||||
<HStack align="stretch" spacing={4} w="full">
|
||||
{/* 时间线和重要性标记 */}
|
||||
<VStack spacing={0} align="center">
|
||||
<Circle
|
||||
size="32px"
|
||||
bg={importance.dotBg}
|
||||
color="white"
|
||||
fontWeight="bold"
|
||||
fontSize="sm"
|
||||
boxShadow="sm"
|
||||
border="2px solid"
|
||||
borderColor={cardBg}
|
||||
<HStack align="stretch" spacing={3} w="full">
|
||||
{/* 左侧时间轴 - 动态样式 */}
|
||||
<VStack spacing={0} align="center" minW="90px">
|
||||
{/* 时间长方形卡片 */}
|
||||
<Box
|
||||
{...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
|
||||
borderWidth={timelineStyle.borderWidth}
|
||||
borderColor={timelineStyle.borderColor}
|
||||
borderRadius="md"
|
||||
px={2}
|
||||
py={2}
|
||||
minW="85px"
|
||||
textAlign="center"
|
||||
boxShadow={timelineStyle.boxShadow}
|
||||
transition="all 0.3s ease"
|
||||
>
|
||||
{event.importance || 'C'}
|
||||
</Circle>
|
||||
{/* 日期 YYYY-MM-DD */}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={timelineStyle.textColor}
|
||||
lineHeight="1.3"
|
||||
>
|
||||
{moment(event.created_at).format('YYYY-MM-DD')}
|
||||
</Text>
|
||||
{/* 时间 HH:mm */}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={timelineStyle.textColor}
|
||||
lineHeight="1.3"
|
||||
mt={0.5}
|
||||
>
|
||||
{moment(event.created_at).format('HH:mm')}
|
||||
</Text>
|
||||
</Box>
|
||||
{/* 时间轴竖线 */}
|
||||
<Box
|
||||
w="2px"
|
||||
flex="1"
|
||||
bg={borderColor}
|
||||
minH="60px"
|
||||
minH="40px"
|
||||
mt={1}
|
||||
/>
|
||||
</VStack>
|
||||
|
||||
{/* 精简事件卡片 */}
|
||||
{/* 右侧内容卡片 */}
|
||||
<Card
|
||||
flex="1"
|
||||
bg={cardBg}
|
||||
bg={index % 2 === 0 ? cardBg : useColorModeValue('gray.50', 'gray.750')}
|
||||
borderWidth="1px"
|
||||
borderColor={borderColor}
|
||||
borderRadius="lg"
|
||||
borderRadius="md"
|
||||
boxShadow="sm"
|
||||
_hover={{
|
||||
boxShadow: 'md',
|
||||
transform: 'translateY(-1px)',
|
||||
boxShadow: 'lg',
|
||||
transform: 'translateY(-2px)',
|
||||
borderColor: importance.color,
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
transition="all 0.3s ease"
|
||||
cursor="pointer"
|
||||
onClick={() => onEventClick(event)}
|
||||
mb={3}
|
||||
mb={2}
|
||||
>
|
||||
<CardBody p={4}>
|
||||
<Flex align="center" justify="space-between" wrap="wrap" gap={3}>
|
||||
{/* 左侧：标题和时间 */}
|
||||
<VStack align="start" spacing={2} flex="1" minW="200px">
|
||||
<Heading
|
||||
size="sm"
|
||||
<CardBody p={3}>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
{/* 第一行：标题（2行）+ 标签（内联）+ 按钮（右侧） */}
|
||||
<Flex align="flex-start" gap={2}>
|
||||
{/* 标题区域：标题+标签（内联） */}
|
||||
<Box flex="1" minW="150px">
|
||||
<Text
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
color={linkColor}
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
lineHeight="1.4"
|
||||
noOfLines={2}
|
||||
display="inline"
|
||||
_hover={{ textDecoration: 'underline', color: 'blue.500' }}
|
||||
onClick={(e) => handleTitleClick(e, event)}
|
||||
cursor="pointer"
|
||||
noOfLines={1}
|
||||
>
|
||||
{event.title}
|
||||
</Heading>
|
||||
<HStack spacing={2} fontSize="xs" color={mutedColor}>
|
||||
<TimeIcon />
|
||||
<Text>{moment(event.created_at).format('MM-DD HH:mm')}</Text>
|
||||
<Text>•</Text>
|
||||
<Text>{event.creator?.username || 'Anonymous'}</Text>
|
||||
</HStack>
|
||||
</VStack>
|
||||
|
||||
{/* 右侧：涨跌幅指标 */}
|
||||
<HStack spacing={3}>
|
||||
<Tooltip label="平均" placement="top">
|
||||
<Box
|
||||
px={3}
|
||||
</Text>
|
||||
{' '}
|
||||
{/* 重要性标签 - 内联 */}
|
||||
<Badge
|
||||
colorScheme={importance.color.split('.')[0]}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={1}
|
||||
borderRadius="md"
|
||||
bg={getPriceChangeBg(event.related_avg_chg)}
|
||||
borderWidth="1px"
|
||||
borderColor={getPriceChangeBorderColor(event.related_avg_chg)}
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<PriceArrow value={event.related_avg_chg} />
|
||||
<Text
|
||||
fontSize="sm"
|
||||
fontWeight="bold"
|
||||
color={getPriceChangeColor(event.related_avg_chg)}
|
||||
display="inline-flex"
|
||||
alignItems="center"
|
||||
verticalAlign="middle"
|
||||
>
|
||||
{event.related_avg_chg != null
|
||||
? `${event.related_avg_chg > 0 ? '+' : ''}${event.related_avg_chg.toFixed(2)}%`
|
||||
: '--'}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Box>
|
||||
{event.importance || 'C'}级
|
||||
</Badge>
|
||||
{' '}
|
||||
{/* 涨跌幅标签 - 内联 */}
|
||||
{event.related_avg_chg != null && (
|
||||
<Tooltip label="平均" placement="top">
|
||||
<Badge
|
||||
colorScheme={event.related_avg_chg > 0 ? 'red' : 'green'}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={1}
|
||||
borderRadius="md"
|
||||
fontWeight="bold"
|
||||
display="inline-flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
<PriceArrow value={event.related_avg_chg} />
|
||||
{event.related_avg_chg > 0 ? '+' : ''}{event.related_avg_chg.toFixed(2)}%
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* 操作按钮 - 固定右侧 */}
|
||||
<HStack spacing={2} flexShrink={0}>
|
||||
<Button
|
||||
size="sm"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
colorScheme="blue"
|
||||
onClick={(e) => handleViewDetailClick(e, event.id)}
|
||||
@@ -518,19 +564,57 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
详情
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
size="xs"
|
||||
variant={isFollowing ? 'solid' : 'outline'}
|
||||
colorScheme="yellow"
|
||||
leftIcon={<StarIcon />}
|
||||
leftIcon={<StarIcon boxSize="10px" />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleFollow(event.id);
|
||||
}}
|
||||
>
|
||||
{isFollowing ? '已关注' : '关注'} {followerCount ? `(${followerCount})` : ''}
|
||||
{isFollowing ? '已关注' : '关注'}
|
||||
{followerCount > 0 && `(${followerCount})`}
|
||||
</Button>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 第二行：统计数据（左） + 作者时间（右） */}
|
||||
<Flex justify="space-between" align="center" fontSize="xs" color={mutedColor}>
|
||||
{/* 左侧：统计数据 */}
|
||||
<HStack spacing={3} display={{ base: 'none', md: 'flex' }}>
|
||||
<Tooltip label="浏览量" placement="top">
|
||||
<HStack spacing={1}>
|
||||
<ViewIcon boxSize="12px" />
|
||||
<Text>{event.view_count || 0}</Text>
|
||||
</HStack>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="帖子数" placement="top">
|
||||
<HStack spacing={1}>
|
||||
<ChatIcon boxSize="12px" />
|
||||
<Text>{event.post_count || 0}</Text>
|
||||
</HStack>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="关注数" placement="top">
|
||||
<HStack spacing={1}>
|
||||
<StarIcon boxSize="12px" />
|
||||
<Text>{followerCount}</Text>
|
||||
</HStack>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
|
||||
{/* 右侧：作者 + 时间（统一格式 YYYY-MM-DD HH:mm） */}
|
||||
<HStack spacing={2}>
|
||||
<Text>@{event.creator?.username || 'Anonymous'}</Text>
|
||||
<Text>•</Text>
|
||||
<Text fontWeight="bold" color={linkColor}>
|
||||
{moment(event.created_at).format('YYYY-MM-DD HH:mm')}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</HStack>
|
||||
@@ -542,28 +626,52 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
const importance = getImportanceConfig(event.importance);
|
||||
const isFollowing = !!followingMap[event.id];
|
||||
const followerCount = followCountMap[event.id] ?? (event.follower_count || 0);
|
||||
const timelineStyle = getTimelineBoxStyle();
|
||||
|
||||
return (
|
||||
<HStack align="stretch" spacing={4} w="full">
|
||||
{/* 时间线和重要性标记 */}
|
||||
<VStack spacing={0} align="center">
|
||||
<Circle
|
||||
size="40px"
|
||||
bg={importance.dotBg}
|
||||
color="white"
|
||||
fontWeight="bold"
|
||||
fontSize="lg"
|
||||
boxShadow="md"
|
||||
border="3px solid"
|
||||
borderColor={cardBg}
|
||||
<HStack align="stretch" spacing={3} w="full">
|
||||
{/* 左侧时间轴 - 动态样式 */}
|
||||
<VStack spacing={0} align="center" minW="90px">
|
||||
{/* 时间长方形卡片 */}
|
||||
<Box
|
||||
{...(timelineStyle.bgGradient ? { bgGradient: timelineStyle.bgGradient } : { bg: timelineStyle.bg })}
|
||||
borderWidth={timelineStyle.borderWidth}
|
||||
borderColor={timelineStyle.borderColor}
|
||||
borderRadius="md"
|
||||
px={2}
|
||||
py={2}
|
||||
minW="85px"
|
||||
textAlign="center"
|
||||
boxShadow={timelineStyle.boxShadow}
|
||||
transition="all 0.3s ease"
|
||||
>
|
||||
{event.importance || 'C'}
|
||||
</Circle>
|
||||
{/* 日期 YYYY-MM-DD */}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={timelineStyle.textColor}
|
||||
lineHeight="1.3"
|
||||
>
|
||||
{moment(event.created_at).format('YYYY-MM-DD')}
|
||||
</Text>
|
||||
{/* 时间 HH:mm */}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={timelineStyle.textColor}
|
||||
lineHeight="1.3"
|
||||
mt={0.5}
|
||||
>
|
||||
{moment(event.created_at).format('HH:mm')}
|
||||
</Text>
|
||||
</Box>
|
||||
{/* 时间轴竖线 */}
|
||||
<Box
|
||||
w="2px"
|
||||
flex="1"
|
||||
bg={borderColor}
|
||||
minH="100px"
|
||||
minH="80px"
|
||||
mt={1}
|
||||
/>
|
||||
</VStack>
|
||||
|
||||
@@ -573,22 +681,24 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
bg={cardBg}
|
||||
borderWidth="1px"
|
||||
borderColor={borderColor}
|
||||
borderRadius="lg"
|
||||
borderRadius="md"
|
||||
boxShadow="sm"
|
||||
_hover={{
|
||||
boxShadow: 'md',
|
||||
transform: 'translateY(-2px)',
|
||||
boxShadow: 'xl',
|
||||
transform: 'translateY(-3px)',
|
||||
borderColor: importance.color,
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
transition="all 0.3s ease"
|
||||
cursor="pointer"
|
||||
onClick={() => onEventClick(event)}
|
||||
mb={4}
|
||||
mb={3}
|
||||
>
|
||||
<CardBody p={5}>
|
||||
<VStack align="stretch" spacing={3}>
|
||||
{/* 标题和重要性标签 */}
|
||||
<Flex align="center" justify="space-between">
|
||||
<CardBody p={4}>
|
||||
<VStack align="stretch" spacing={2.5}>
|
||||
{/* 第一行：标题+优先级 | 统计+关注 */}
|
||||
<Flex align="center" justify="space-between" gap={3}>
|
||||
{/* 左侧：标题 + 优先级标签 */}
|
||||
<HStack spacing={2} flex="1" align="center">
|
||||
<Tooltip
|
||||
label="点击查看事件详情"
|
||||
placement="top"
|
||||
@@ -605,6 +715,7 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
{event.title}
|
||||
</Heading>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip
|
||||
label={
|
||||
<VStack align="start" spacing={1} maxW="320px">
|
||||
@@ -627,7 +738,7 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
))}
|
||||
</VStack>
|
||||
}
|
||||
placement="left"
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="white"
|
||||
color="gray.800"
|
||||
@@ -640,154 +751,26 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
>
|
||||
<Badge
|
||||
colorScheme={importance.color.split('.')[0]}
|
||||
px={3}
|
||||
py={1}
|
||||
borderRadius="full"
|
||||
fontSize="sm"
|
||||
px={1.5}
|
||||
py={0.5}
|
||||
borderRadius="md"
|
||||
fontSize="xs"
|
||||
cursor="help"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
flexShrink={0}
|
||||
>
|
||||
<InfoIcon boxSize={3} />
|
||||
{importance.label}优先级
|
||||
<InfoIcon boxSize={2.5} />
|
||||
{event.importance || 'C'}级
|
||||
</Badge>
|
||||
</Tooltip>
|
||||
</Flex>
|
||||
|
||||
{/* 元信息 */}
|
||||
<HStack spacing={4} fontSize="sm">
|
||||
<HStack
|
||||
bg="blue.50"
|
||||
px={3}
|
||||
py={1}
|
||||
borderRadius="full"
|
||||
color="blue.700"
|
||||
fontWeight="medium"
|
||||
>
|
||||
<TimeIcon />
|
||||
<Text>{moment(event.created_at).format('YYYY-MM-DD HH:mm')}</Text>
|
||||
</HStack>
|
||||
<Text color={mutedColor}>•</Text>
|
||||
<Text color={mutedColor}>{event.creator?.username || 'Anonymous'}</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 描述 */}
|
||||
<Text color={textColor} fontSize="sm" lineHeight="tall" noOfLines={3}>
|
||||
{event.description}
|
||||
</Text>
|
||||
|
||||
{/* 价格变化指标 */}
|
||||
<Box
|
||||
bg={useColorModeValue('gradient.subtle', 'gray.700')}
|
||||
bgGradient="linear(to-r, gray.50, white)"
|
||||
p={4}
|
||||
borderRadius="lg"
|
||||
borderWidth="1px"
|
||||
borderColor={borderColor}
|
||||
boxShadow="sm"
|
||||
>
|
||||
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={3}>
|
||||
<Tooltip label="点击查看相关股票" placement="top" hasArrow>
|
||||
<Box
|
||||
cursor="pointer"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
bg={getPriceChangeBg(event.related_avg_chg)}
|
||||
borderWidth="2px"
|
||||
borderColor={getPriceChangeBorderColor(event.related_avg_chg)}
|
||||
_hover={{ transform: 'scale(1.02)', boxShadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Stat size="sm">
|
||||
<StatHelpText mb={1} fontWeight="semibold" color="gray.600" fontSize="xs">
|
||||
平均
|
||||
</StatHelpText>
|
||||
<StatNumber fontSize="xl" color={getPriceChangeColor(event.related_avg_chg)}>
|
||||
{event.related_avg_chg != null ? (
|
||||
<HStack spacing={1}>
|
||||
<PriceArrow value={event.related_avg_chg} />
|
||||
<Text fontWeight="bold">
|
||||
{event.related_avg_chg > 0 ? '+' : ''}{event.related_avg_chg.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
) : (
|
||||
<Text color="gray.400">--</Text>
|
||||
)}
|
||||
</StatNumber>
|
||||
</Stat>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="点击查看相关股票" placement="top" hasArrow>
|
||||
<Box
|
||||
cursor="pointer"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
bg={getPriceChangeBg(event.related_max_chg)}
|
||||
borderWidth="2px"
|
||||
borderColor={getPriceChangeBorderColor(event.related_max_chg)}
|
||||
_hover={{ transform: 'scale(1.02)', boxShadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Stat size="sm">
|
||||
<StatHelpText mb={1} fontWeight="semibold" color="gray.600" fontSize="xs">
|
||||
最大
|
||||
</StatHelpText>
|
||||
<StatNumber fontSize="xl" color={getPriceChangeColor(event.related_max_chg)}>
|
||||
{event.related_max_chg != null ? (
|
||||
<HStack spacing={1}>
|
||||
<PriceArrow value={event.related_max_chg} />
|
||||
<Text fontWeight="bold">
|
||||
{event.related_max_chg > 0 ? '+' : ''}{event.related_max_chg.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
) : (
|
||||
<Text color="gray.400">--</Text>
|
||||
)}
|
||||
</StatNumber>
|
||||
</Stat>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label="点击查看相关股票" placement="top" hasArrow>
|
||||
<Box
|
||||
cursor="pointer"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
bg={getPriceChangeBg(event.related_week_chg)}
|
||||
borderWidth="2px"
|
||||
borderColor={getPriceChangeBorderColor(event.related_week_chg)}
|
||||
_hover={{ transform: 'scale(1.02)', boxShadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Stat size="sm">
|
||||
<StatHelpText mb={1} fontWeight="semibold" color="gray.600" fontSize="xs">
|
||||
周
|
||||
</StatHelpText>
|
||||
<StatNumber fontSize="xl" color={getPriceChangeColor(event.related_week_chg)}>
|
||||
{event.related_week_chg != null ? (
|
||||
<HStack spacing={1}>
|
||||
<PriceArrow value={event.related_week_chg} />
|
||||
<Text fontWeight="bold">
|
||||
{event.related_week_chg > 0 ? '+' : ''}{event.related_week_chg.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
) : (
|
||||
<Text color="gray.400">--</Text>
|
||||
)}
|
||||
</StatNumber>
|
||||
</Stat>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* 统计信息和操作按钮 */}
|
||||
<Flex justify="space-between" align="center" wrap="wrap" gap={3}>
|
||||
<HStack spacing={6}>
|
||||
{/* 右侧：统计数据 + 关注按钮 */}
|
||||
<HStack spacing={4} flexShrink={0}>
|
||||
{/* 统计数据 */}
|
||||
<HStack spacing={4}>
|
||||
<Tooltip label="浏览量" placement="top">
|
||||
<HStack spacing={1} color={mutedColor}>
|
||||
<ViewIcon />
|
||||
@@ -808,29 +791,12 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
|
||||
<ButtonGroup size="sm" spacing={2}>
|
||||
<Button
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
leftIcon={<ViewIcon />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEventClick(event);
|
||||
}}
|
||||
>
|
||||
快速查看
|
||||
</Button>
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
leftIcon={<ExternalLinkIcon />}
|
||||
onClick={(e) => handleViewDetailClick(e, event.id)}
|
||||
>
|
||||
详细信息
|
||||
</Button>
|
||||
{/* 关注按钮 */}
|
||||
<Button
|
||||
size="sm"
|
||||
colorScheme="yellow"
|
||||
variant={isFollowing ? 'solid' : 'outline'}
|
||||
leftIcon={<StarIcon />}
|
||||
leftIcon={<StarIcon boxSize="12px" />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleFollow(event.id);
|
||||
@@ -838,8 +804,124 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
>
|
||||
{isFollowing ? '已关注' : '关注'}
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 第二行：价格标签 | 时间+作者 */}
|
||||
<Flex justify="space-between" align="center" wrap="wrap" gap={3}>
|
||||
{/* 左侧：价格标签 */}
|
||||
<HStack spacing={2} flexWrap="wrap">
|
||||
{/* 平均涨幅 - 始终显示，无数据时显示 -- */}
|
||||
<Badge
|
||||
colorScheme={event.related_avg_chg != null
|
||||
? (event.related_avg_chg > 0 ? 'red' : event.related_avg_chg < 0 ? 'green' : 'gray')
|
||||
: 'gray'}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={0.5}
|
||||
borderRadius="md"
|
||||
cursor="pointer"
|
||||
_hover={{ transform: 'scale(1.05)', boxShadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize="xs" opacity={0.8}>平均</Text>
|
||||
<Text fontWeight="bold">
|
||||
{event.related_avg_chg != null
|
||||
? `${event.related_avg_chg > 0 ? '+' : ''}${event.related_avg_chg.toFixed(2)}%`
|
||||
: '--'}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Badge>
|
||||
|
||||
{/* 最大涨幅 - 始终显示，无数据时显示 -- */}
|
||||
<Badge
|
||||
colorScheme={event.related_max_chg != null
|
||||
? (event.related_max_chg > 0 ? 'red' : event.related_max_chg < 0 ? 'green' : 'gray')
|
||||
: 'gray'}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={0.5}
|
||||
borderRadius="md"
|
||||
cursor="pointer"
|
||||
_hover={{ transform: 'scale(1.05)', boxShadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize="xs" opacity={0.8}>最大</Text>
|
||||
<Text fontWeight="bold">
|
||||
{event.related_max_chg != null
|
||||
? `${event.related_max_chg > 0 ? '+' : ''}${event.related_max_chg.toFixed(2)}%`
|
||||
: '--'}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Badge>
|
||||
|
||||
{/* 周涨幅 - 始终显示，无数据时显示 -- */}
|
||||
<Badge
|
||||
colorScheme={event.related_week_chg != null
|
||||
? (event.related_week_chg > 0 ? 'red' : event.related_week_chg < 0 ? 'green' : 'gray')
|
||||
: 'gray'}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={0.5}
|
||||
borderRadius="md"
|
||||
cursor="pointer"
|
||||
_hover={{ transform: 'scale(1.05)', boxShadow: 'md' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<Text fontSize="xs" opacity={0.8}>周</Text>
|
||||
{event.related_week_chg != null && <PriceArrow value={event.related_week_chg} />}
|
||||
<Text fontWeight="bold">
|
||||
{event.related_week_chg != null
|
||||
? `${event.related_week_chg > 0 ? '+' : ''}${event.related_week_chg.toFixed(2)}%`
|
||||
: '--'}
|
||||
</Text>
|
||||
</HStack>
|
||||
</Badge>
|
||||
</HStack>
|
||||
|
||||
{/* 右侧：时间 + 作者 */}
|
||||
<HStack spacing={2} fontSize="sm" flexShrink={0}>
|
||||
<Text fontWeight="bold" color={linkColor}>
|
||||
{moment(event.created_at).format('YYYY-MM-DD HH:mm')}
|
||||
</Text>
|
||||
<Text color={mutedColor}>•</Text>
|
||||
<Text color={mutedColor}>@{event.creator?.username || 'Anonymous'}</Text>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 第三行：描述文字 + 展开/收起 */}
|
||||
{event.description && (
|
||||
<Box>
|
||||
<Text
|
||||
color={textColor}
|
||||
fontSize="sm"
|
||||
lineHeight="tall"
|
||||
noOfLines={expandedDescriptions[event.id] ? undefined : 3}
|
||||
>
|
||||
{event.description}
|
||||
</Text>
|
||||
{event.description.length > 120 && (
|
||||
<Button
|
||||
variant="link"
|
||||
size="xs"
|
||||
colorScheme="blue"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpandedDescriptions(prev => ({
|
||||
...prev,
|
||||
[event.id]: !prev[event.id]
|
||||
}));
|
||||
}}
|
||||
mt={1}
|
||||
>
|
||||
{expandedDescriptions[event.id] ? '收起' : '...展开'}
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</VStack>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -946,47 +1028,117 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
|
||||
return (
|
||||
<Box bg={bgColor} minH="100vh" pb={8}>
|
||||
{/* 顶部控制栏：左空白 + 中间分页器 + 右侧控制（固定sticky） - 铺满全宽 */}
|
||||
<Box
|
||||
position="sticky"
|
||||
top={0}
|
||||
zIndex={10}
|
||||
bg={useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(26, 32, 44, 0.9)')}
|
||||
backdropFilter="blur(10px)"
|
||||
boxShadow="sm"
|
||||
mb={4}
|
||||
py={2}
|
||||
w="100%"
|
||||
>
|
||||
<Container maxW="container.xl">
|
||||
{/* 顶部控制栏：连接状态 + 视图切换 */}
|
||||
<Flex justify="space-between" align="center" mb={6}>
|
||||
{/* WebSocket 连接状态指示器 */}
|
||||
<HStack spacing={2}>
|
||||
<Flex justify="space-between" align="center">
|
||||
{/* 左侧占位 */}
|
||||
<Box flex="1" />
|
||||
|
||||
{/* 中间：分页器 */}
|
||||
{pagination.total > 0 && localEvents.length > 0 ? (
|
||||
<Flex align="center" gap={2}>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
onClick={() => onPageChange(pagination.current - 1)}
|
||||
isDisabled={pagination.current === 1}
|
||||
>
|
||||
上一页
|
||||
</Button>
|
||||
<Text fontSize="xs" color={mutedColor} px={2} whiteSpace="nowrap">
|
||||
第 {pagination.current} / {Math.ceil(pagination.total / pagination.pageSize)} 页
|
||||
</Text>
|
||||
<Button
|
||||
size="xs"
|
||||
variant="outline"
|
||||
onClick={() => onPageChange(pagination.current + 1)}
|
||||
isDisabled={pagination.current === Math.ceil(pagination.total / pagination.pageSize)}
|
||||
>
|
||||
下一页
|
||||
</Button>
|
||||
<Text fontSize="xs" color={mutedColor} ml={2} whiteSpace="nowrap">
|
||||
共 {pagination.total} 条
|
||||
</Text>
|
||||
</Flex>
|
||||
) : (
|
||||
<Box flex="1" />
|
||||
)}
|
||||
|
||||
{/* 右侧：控制按钮 */}
|
||||
<Flex align="center" gap={3} flex="1" justify="flex-end">
|
||||
{/* WebSocket 连接状态 */}
|
||||
<Badge
|
||||
colorScheme={isConnected ? 'green' : 'red'}
|
||||
fontSize="sm"
|
||||
px={3}
|
||||
fontSize="xs"
|
||||
px={2}
|
||||
py={1}
|
||||
borderRadius="full"
|
||||
>
|
||||
{isConnected ? '🟢 实时推送已开启' : '🔴 实时推送未连接'}
|
||||
{isConnected ? '🟢 实时' : '🔴 离线'}
|
||||
</Badge>
|
||||
{isConnected && (
|
||||
<Text fontSize="xs" color={mutedColor}>
|
||||
新事件将自动推送
|
||||
</Text>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 桌面推送开关 */}
|
||||
<FormControl display="flex" alignItems="center" w="auto">
|
||||
<FormLabel htmlFor="push-notification" mb="0" fontSize="xs" color={textColor} mr={2}>
|
||||
推送
|
||||
</FormLabel>
|
||||
<Tooltip
|
||||
label={
|
||||
browserPermission === 'granted'
|
||||
? '桌面推送已开启'
|
||||
: browserPermission === 'denied'
|
||||
? '推送权限被拒绝，请在浏览器设置中允许通知权限'
|
||||
: '点击开启桌面推送通知'
|
||||
}
|
||||
placement="top"
|
||||
>
|
||||
<Switch
|
||||
id="push-notification"
|
||||
size="sm"
|
||||
isChecked={browserPermission === 'granted'}
|
||||
onChange={handlePushToggle}
|
||||
colorScheme="green"
|
||||
/>
|
||||
</Tooltip>
|
||||
</FormControl>
|
||||
|
||||
{/* 视图切换控制 */}
|
||||
<FormControl display="flex" alignItems="center" w="auto">
|
||||
<FormLabel htmlFor="compact-mode" mb="0" fontSize="sm" color={textColor}>
|
||||
精简模式
|
||||
<FormLabel htmlFor="compact-mode" mb="0" fontSize="xs" color={textColor} mr={2}>
|
||||
精简
|
||||
</FormLabel>
|
||||
<Switch
|
||||
id="compact-mode"
|
||||
size="sm"
|
||||
isChecked={isCompactMode}
|
||||
onChange={(e) => setIsCompactMode(e.target.checked)}
|
||||
colorScheme="blue"
|
||||
/>
|
||||
</FormControl>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Container>
|
||||
</Box>
|
||||
|
||||
{/* 事件列表内容 */}
|
||||
<Container maxW="container.xl">
|
||||
{localEvents.length > 0 ? (
|
||||
<VStack align="stretch" spacing={0}>
|
||||
{localEvents.map((event, index) => (
|
||||
<Box key={event.id} position="relative">
|
||||
{isCompactMode
|
||||
? renderCompactEvent(event)
|
||||
? renderCompactEvent(event, index)
|
||||
: renderDetailedEvent(event)
|
||||
}
|
||||
</Box>
|
||||
|
||||
Reference in New Issue
Block a user