From 6cde2175db5edab973b55ce937b5a4f971c1ef0d Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Mon, 3 Nov 2025 11:28:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=AE=9E=E6=97=B6?=
 =?UTF-8?q?=E8=A6=81=E9=97=BB=E4=BA=8B=E4=BB=B6=E5=8D=A1=E7=89=87=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E9=AB=98=E4=BA=AE=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

功能新增：
- 点击事件卡片后显示高亮状态
- 当前选中的卡片有明显的视觉反馈

视觉效果：
- 选中状态：蓝色浅背景 (blue.50) + 蓝色粗边框 (2px, blue.500) + 大阴影 (lg)
- 未选中状态：原样式（白色/灰色交替背景 + 细边框 + 小阴影）
- 过渡动画：0.3s 平滑过渡
- 悬停效果：选中卡片悬停时边框变为 blue.600，阴影增强为 xl

技术实现：
1. DynamicNewsCard.js:
   - 传递 isSelected prop 给 DynamicNewsEventCard
   - 判断逻辑：isSelected={selectedEvent?.id === event.id}

2. DynamicNewsEventCard.js:
   - 添加 isSelected 参数（默认 false）
   - 根据 isSelected 动态调整 Card 样式：
     - 背景色：选中 blue.50 / 未选中 原样式
     - 边框：选中 2px blue.500 / 未选中 1px 原颜色
     - 阴影：选中 lg / 未选中 sm

用户体验提升：
- 清晰显示当前查看的事件
- 与下方详情面板形成呼应
- 视觉反馈明确，交互友好

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Community/components/DynamicNewsCard.js   |  1 +
 .../EventCard/DynamicNewsEventCard.js         | 20 +++++++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js
index 973bc9e0..f264d44f 100644
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/src/views/Community/components/DynamicNewsCard.js
@@ -223,6 +223,7 @@ const DynamicNewsCard = forwardRef(({
                     index={index}
                     isFollowing={false}
                     followerCount={event.follower_count || 0}
+                    isSelected={selectedEvent?.id === event.id}
                     onEventClick={(clickedEvent) => {
                       setSelectedEvent(clickedEvent);
                       // 只更新详情面板，不触发父组件回调
diff --git a/src/views/Community/components/EventCard/DynamicNewsEventCard.js b/src/views/Community/components/EventCard/DynamicNewsEventCard.js
index a398c284..0668ae47 100644
--- a/src/views/Community/components/EventCard/DynamicNewsEventCard.js
+++ b/src/views/Community/components/EventCard/DynamicNewsEventCard.js
@@ -24,6 +24,7 @@ import StockChangeIndicators from '../../../../components/StockChangeIndicators'
  * @param {number} props.index - 事件索引
  * @param {boolean} props.isFollowing - 是否已关注
  * @param {number} props.followerCount - 关注数
+ * @param {boolean} props.isSelected - 是否被选中
  * @param {Function} props.onEventClick - 卡片点击事件
  * @param {Function} props.onTitleClick - 标题点击事件
  * @param {Function} props.onToggleFollow - 切换关注事件
@@ -35,6 +36,7 @@ const DynamicNewsEventCard = ({
     index,
     isFollowing,
     followerCount,
+    isSelected = false,
     onEventClick,
     onTitleClick,
     onToggleFollow,
@@ -72,15 +74,21 @@ const DynamicNewsEventCard = ({
             {/* 事件卡片 */}
             <Card
                 position="relative"
-                bg={index % 2 === 0 ? cardBg : useColorModeValue('gray.50', 'gray.750')}
-                borderWidth="1px"
-                borderColor={borderColor}
+                bg={isSelected
+                    ? useColorModeValue('blue.50', 'blue.900')
+                    : (index % 2 === 0 ? cardBg : useColorModeValue('gray.50', 'gray.750'))
+                }
+                borderWidth={isSelected ? "2px" : "1px"}
+                borderColor={isSelected
+                    ? useColorModeValue('blue.500', 'blue.400')
+                    : borderColor
+                }
                 borderRadius="md"
-                boxShadow="sm"
+                boxShadow={isSelected ? "lg" : "sm"}
                 _hover={{
-                    boxShadow: 'lg',
+                    boxShadow: 'xl',
                     transform: 'translateY(-2px)',
-                    borderColor: importance.color,
+                    borderColor: isSelected ? 'blue.600' : importance.color,
                 }}
                 transition="all 0.3s ease"
                 cursor="pointer"