style(EventCard): 事件卡片布局优化
- 投票按钮移至标题行右侧，红绿胶囊合并样式 - 浏览量图标换为 lucide Eye icon - 浏览/收藏绝对定位到卡片右下角 - 收藏按钮改为深色胶囊背景+金色星星 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -25,7 +25,7 @@ import {
|
||||
} from './atoms';
|
||||
import StockChangeIndicators from '@components/StockChangeIndicators';
|
||||
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||||
import { TrendingUp, TrendingDown } from 'lucide-react';
|
||||
import { TrendingUp, TrendingDown, Eye } from 'lucide-react';
|
||||
|
||||
// 数字格式化（8600 → 8.6k）
|
||||
const formatCompactNumber = (num) => {
|
||||
@@ -206,127 +206,142 @@ const HorizontalDynamicNewsEventCard = React.memo(({
|
||||
|
||||
|
||||
<VStack align="stretch" spacing={2}>
|
||||
{/* 第一行：概念标签 + 标题（内联布局） */}
|
||||
<Tooltip
|
||||
label={event.title}
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="gray.700"
|
||||
color="white"
|
||||
fontSize="sm"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
isDisabled={event.title.length < 40}
|
||||
>
|
||||
<Box
|
||||
cursor="pointer"
|
||||
onClick={(e) => onTitleClick?.(e, event)}
|
||||
mt={1}
|
||||
paddingLeft={isMobile ? '70px' : undefined}
|
||||
lineHeight="1.6"
|
||||
css={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
{/* 第一行：概念标签 + 标题 + 投票按钮 */}
|
||||
<HStack justify="space-between" align="flex-start" spacing={2}>
|
||||
{/* 左侧：概念 + 标题 */}
|
||||
<Tooltip
|
||||
label={event.title}
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="gray.700"
|
||||
color="white"
|
||||
fontSize="sm"
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
isDisabled={event.title.length < 40}
|
||||
>
|
||||
{/* 概念标签（内联） */}
|
||||
{conceptLabel && (
|
||||
<Badge
|
||||
as="span"
|
||||
colorScheme="purple"
|
||||
fontSize="xs"
|
||||
borderRadius="md"
|
||||
px={1.5}
|
||||
py={0.5}
|
||||
mr={1.5}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
{conceptLabel}
|
||||
</Badge>
|
||||
)}
|
||||
{/* 标题（内联） */}
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={titleFontSize}
|
||||
fontWeight="semibold"
|
||||
color={linkColor}
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
<Box
|
||||
flex="1"
|
||||
cursor="pointer"
|
||||
onClick={(e) => onTitleClick?.(e, event)}
|
||||
mt={1}
|
||||
paddingLeft={isMobile ? '70px' : undefined}
|
||||
lineHeight="1.6"
|
||||
css={{
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
{/* 概念标签（内联） */}
|
||||
{conceptLabel && (
|
||||
<Badge
|
||||
as="span"
|
||||
colorScheme="purple"
|
||||
fontSize="xs"
|
||||
borderRadius="md"
|
||||
px={1.5}
|
||||
py={0.5}
|
||||
mr={1.5}
|
||||
verticalAlign="middle"
|
||||
>
|
||||
{conceptLabel}
|
||||
</Badge>
|
||||
)}
|
||||
{/* 标题（内联） */}
|
||||
<Text
|
||||
as="span"
|
||||
fontSize={titleFontSize}
|
||||
fontWeight="semibold"
|
||||
color={linkColor}
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
>
|
||||
{event.title}
|
||||
</Text>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
|
||||
{/* 底部：左侧涨跌幅 + 右侧工具栏 */}
|
||||
<HStack justify="space-between" align="center" w="full" pt={1}>
|
||||
{/* 左侧：涨跌幅指标（保持默认样式） */}
|
||||
{/* 右侧：投票按钮（紧密相连的圆角矩形） */}
|
||||
<HStack spacing={0} flexShrink={0} mt={1} borderRadius="lg" overflow="hidden" onClick={(e) => e.stopPropagation()}>
|
||||
{/* 看涨 - 左半边 */}
|
||||
<Tooltip label="看涨" placement="top" hasArrow>
|
||||
<VStack
|
||||
as="button"
|
||||
bg="#C53030"
|
||||
color="white"
|
||||
px={3}
|
||||
py={1.5}
|
||||
spacing={0}
|
||||
_hover={{ bg: '#9B2C2C' }}
|
||||
transition="all 0.2s"
|
||||
onClick={() => onVoteChange?.({ eventId: event.id, voteType: 'bullish' })}
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<TrendingUp size={16} />
|
||||
<Text fontSize="sm" fontWeight="semibold">{formatCompactNumber(event.bullish_count)}</Text>
|
||||
</HStack>
|
||||
<Text fontSize="xs">看涨</Text>
|
||||
</VStack>
|
||||
</Tooltip>
|
||||
|
||||
{/* 看跌 - 右半边 */}
|
||||
<Tooltip label="看跌" placement="top" hasArrow>
|
||||
<VStack
|
||||
as="button"
|
||||
bg="#38A169"
|
||||
color="white"
|
||||
px={3}
|
||||
py={1.5}
|
||||
spacing={0}
|
||||
_hover={{ bg: '#2F855A' }}
|
||||
transition="all 0.2s"
|
||||
onClick={() => onVoteChange?.({ eventId: event.id, voteType: 'bearish' })}
|
||||
>
|
||||
<HStack spacing={1}>
|
||||
<TrendingDown size={16} />
|
||||
<Text fontSize="sm" fontWeight="semibold">{formatCompactNumber(event.bearish_count)}</Text>
|
||||
</HStack>
|
||||
<Text fontSize="xs">看跌</Text>
|
||||
</VStack>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* 第二行：涨跌幅指标 */}
|
||||
<Box pt={1}>
|
||||
<StockChangeIndicators
|
||||
avgChange={event.related_avg_chg}
|
||||
maxChange={event.related_max_chg}
|
||||
expectationScore={event.expectation_score || event.expectation_surprise_score}
|
||||
size="default"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 右侧：工具栏 */}
|
||||
<HStack spacing={1} align="center" onClick={(e) => e.stopPropagation()}>
|
||||
{/* 浏览量 - 上下结构 */}
|
||||
<VStack spacing={0} align="center">
|
||||
<Text fontSize="xs" color="gray.400">👁</Text>
|
||||
<Text fontSize="2xs" color="gray.400">{formatCompactNumber(event.view_count)}</Text>
|
||||
</VStack>
|
||||
|
||||
{/* 收藏按钮 - 上下结构 */}
|
||||
<EventFollowButton
|
||||
isFollowing={isFollowing}
|
||||
followerCount={followerCount}
|
||||
onToggle={() => onToggleFollow?.(event.id)}
|
||||
size="sm"
|
||||
showCount={true}
|
||||
variant="minimal"
|
||||
layout="vertical"
|
||||
/>
|
||||
|
||||
{/* 合并投票按钮 - 左红右绿，上图标下文字 */}
|
||||
<HStack spacing={0} borderRadius="md" overflow="hidden">
|
||||
{/* 看涨 - 红色左半边 */}
|
||||
<Tooltip label="看涨" placement="top" hasArrow>
|
||||
<VStack
|
||||
as="button"
|
||||
bg="#C53030"
|
||||
color="white"
|
||||
px={2}
|
||||
py={1}
|
||||
spacing={0}
|
||||
_hover={{ bg: '#9B2C2C' }}
|
||||
transition="all 0.2s"
|
||||
onClick={() => onVoteChange?.({ eventId: event.id, voteType: 'bullish' })}
|
||||
>
|
||||
<TrendingUp size={14} />
|
||||
<Text fontSize="2xs" fontWeight="semibold">{formatCompactNumber(event.bullish_count)}</Text>
|
||||
</VStack>
|
||||
</Tooltip>
|
||||
|
||||
{/* 看跌 - 绿色右半边 */}
|
||||
<Tooltip label="看跌" placement="top" hasArrow>
|
||||
<VStack
|
||||
as="button"
|
||||
bg="#38A169"
|
||||
color="white"
|
||||
px={2}
|
||||
py={1}
|
||||
spacing={0}
|
||||
_hover={{ bg: '#2F855A' }}
|
||||
transition="all 0.2s"
|
||||
onClick={() => onVoteChange?.({ eventId: event.id, voteType: 'bearish' })}
|
||||
>
|
||||
<TrendingDown size={14} />
|
||||
<Text fontSize="2xs" fontWeight="semibold">{formatCompactNumber(event.bearish_count)}</Text>
|
||||
</VStack>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
{/* 右下角：浏览 + 收藏（绝对定位） */}
|
||||
<HStack
|
||||
position="absolute"
|
||||
bottom={2}
|
||||
right={2}
|
||||
spacing={3}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* 浏览量 */}
|
||||
<HStack spacing={0.5} color="gray.400">
|
||||
<Eye size={16} />
|
||||
<Text fontSize="xs">{formatCompactNumber(event.view_count)}</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 收藏按钮 */}
|
||||
<EventFollowButton
|
||||
isFollowing={isFollowing}
|
||||
followerCount={followerCount}
|
||||
onToggle={() => onToggleFollow?.(event.id)}
|
||||
size="sm"
|
||||
showCount={true}
|
||||
variant="minimal"
|
||||
layout="horizontal"
|
||||
/>
|
||||
</HStack>
|
||||
</VStack>
|
||||
</CardBody>
|
||||
|
||||
@@ -39,18 +39,20 @@ const EventFollowButton = ({
|
||||
<Tooltip label={isFollowing ? '取消关注' : '关注事件'} hasArrow placement="bottom">
|
||||
<Stack
|
||||
as="button"
|
||||
spacing={isVertical ? 0 : 1.5}
|
||||
spacing={isVertical ? 0 : 1}
|
||||
px={isVertical ? 2 : 3}
|
||||
py={isVertical ? 1 : 1.5}
|
||||
bg="rgba(50, 50, 60, 0.9)"
|
||||
borderRadius="full"
|
||||
cursor="pointer"
|
||||
onClick={handleClick}
|
||||
align="center"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
|
||||
_hover={{ bg: 'rgba(70, 70, 80, 0.95)' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Star
|
||||
size={isVertical ? '14px' : iconSize}
|
||||
color={isFollowing ? "#FFD700" : "#A0AEC0"}
|
||||
color="#FFD700"
|
||||
fill={isFollowing ? "#FFD700" : "none"}
|
||||
style={{ transition: 'all 0.2s' }}
|
||||
/>
|
||||
@@ -58,7 +60,7 @@ const EventFollowButton = ({
|
||||
<Text
|
||||
fontSize={isVertical ? "2xs" : "sm"}
|
||||
fontWeight="semibold"
|
||||
color={isFollowing ? "yellow.400" : "gray.400"}
|
||||
color={isFollowing ? "yellow.400" : "yellow.500"}
|
||||
>
|
||||
{followerCount || 0}
|
||||
</Text>
|
||||
|
||||
Reference in New Issue
Block a user