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