feat: 实现实时要闻事件卡片点击高亮效果

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

视觉效果:
- 选中状态:蓝色浅背景 (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>
This commit is contained in:
zdl
2025-11-03 11:28:03 +08:00
parent f432d72151
commit 6cde2175db
2 changed files with 15 additions and 6 deletions

View File

@@ -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);
// 只更新详情面板,不触发父组件回调