From ed9f7ddabe60a026de49fb9a8b14dc837de65dd9 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 15 Jan 2026 16:31:39 +0800
Subject: [PATCH] =?UTF-8?q?style(EventCard):=20=E4=BA=8B=E4=BB=B6=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 投票按钮移至标题行右侧，红绿胶囊合并样式
- 浏览量图标换为 lucide Eye icon
- 浏览/收藏绝对定位到卡片右下角
- 收藏按钮改为深色胶囊背景+金色星星

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../HorizontalDynamicNewsEventCard.js         | 237 ++++++++++--------
 .../EventCard/atoms/EventFollowButton.js      |  10 +-
 2 files changed, 132 insertions(+), 115 deletions(-)

diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
index 62ebe531..0174f4a2 100644
--- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
@@ -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>
diff --git a/src/views/Community/components/EventCard/atoms/EventFollowButton.js b/src/views/Community/components/EventCard/atoms/EventFollowButton.js
index e9410906..07c302a8 100644
--- a/src/views/Community/components/EventCard/atoms/EventFollowButton.js
+++ b/src/views/Community/components/EventCard/atoms/EventFollowButton.js
@@ -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>